How to organize the HTML structure and apply CSS. Which does not conflict with others CSS.
Which is the better way to apply the CSS to the targeted element?
Way 1:
.PARENT_1 .CHILD:first-child {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Way 2:
.PARENT_1_CHILD_1 {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD PARENT_1_CHILD_1"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Any other way to improve CSS Specificity?
Can I use Bem Methodology?
If you want to apply CSS only to one element at a time, use an id for the element e.g.
if you target only one element wrapped inside a div, you can write it down in css like this: #divname > #something.a (when #something.a is first element inside the wrapper div) OR**
simply #divname #something.a - this will find the element with id anywhere inside the wrapper div.
Hope you got the point. :)
Here are css Methodologies you can find a depth explanation:
Examples of CSS Methodologies:
OOCSS, SMACSS, Idiomatic CSS and BEM
Title CSS Simple Approach CSS Class Naming
Related
I have a class that is used in multiple divs
<div class="wrapper">
<div class="child1">
...
</div>
</div>
<div class="wrapper">
<div class="child2">
...
</div>
</div>
<div class="wrapper">
<div class="child3">
...
</div>
</div>
Here, I want to add a style (let's just say color: red) to the wrapper class that has child2 as its child. I want to do this based on the name, not the order of the child. Any thoughts?
Right now, you can only achieve the behaviour you want using JavaScript.
Use JavaScript to select all .wrapper > .child2 elements and set the style of the parent wrapper element to what you want.
However, it might eventually be possible with CSS thanks to the :has pseudo-class. It is not currently supported by any major browsers but that could change soon!
In my html file, I wrote the code like this,
<body class="sign-in-body">
<div class="container sign-in-container">
<div class="row">
<div class="col"> </div>
<div class="col-8">
<div class="card">
<div class="card-block">
This is some text within a card block.
</div>
</div>
</div>
<div class="col"> </div>
</div>
</div>
I want to add a margin-top: 15% to my container class. To do that I wrote,
div.container.sign-in-container {
margin-top: 15%;
}
But the problem is if I add just,
.container.sign-in-container
it works.
Why is that?
The selector .container.sign-in-container will select any element that has both container and sign-in-container classes.
But div.container.sign-in-container will select only the div elements with both of the css classes.
Since you have only a div with both classes, both of the selectors work.
You should probably read about css selectors. This is a good reference to start.
In css you add only one class for css not necessary to add div.container.sign-in-container. This is also work in one class .sign-in-container. If you want to override css then you can use parent of div.
You are using a class level CSS selector. It will work. You can have multiple kinds of selectors and combinators in CSS to target the element on your page.
With your example
div.container.sign-in-container
div.sign-in-container
div.container
.container.sign-in-container
.container
.sign-in-container
all are going to target the same div, that is why it works.
Trying to only color certain every other div of class 'story':
<div class="wrap-well">
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
<div class="clearfix"></div>
<div class="story">odd</div>
<div class="story">even</div>
</div>
CSS:
.wrap-well div.story:nth-child(even) {
background-color:#ff00ff;
}
Fiddle:
http://jsfiddle.net/NF2dk/
But it seems that 'clearfix' columns are also counted...
#Marcin and #Explosion Pills is absolutely right here, but as I inspected your DOM, you've a consistent pattern going on there, you can use Adjacent selector to achieve this rather than using nth-child or nth-of-type
.wrap-well div.story + div.story {
background-color:#ff00ff;
}
Demo
This way, it will just do the job what you wanted to achieve, also it's much more compatible compared to nth pseudos
nth-child does not work with the selector, but the element. It selects each even div regardless of the composition of the selector.
You can use nth-of-type to only select <div> elements and use another element such as <br> for the clearfix.
http://jsfiddle.net/NF2dk/1/
There is nothing like nth-of-class() selector.
The closest you can get is nth-of-type(). But it will look at the element tag, not class assigned to the element.
I have an html element that can have either a child with id='slideshow'
<div id='content'>
<div id='slideshow'>
</div>
</div>
or a different child
<div id='content'>
<div id='other'>
</div>
</div>
I want to apply a style to #content only if it has a child #slideshow.
Is it possible?
Unfortunately this is not (yet?) possible in CSS alone. You can however do it with a couple of lines in jquery or almost any other javascript framework.
I have the following html structure
<div id="content">
<div id="transport">
<div id="header">Header Text</div>
<div id="image"></div>
<div id="right_content">Lots of text</div>
</div>
</div>
Is there a better way to arrange the css for the above rather than use ids for all of the divs?
IDs can only be used once in a document. Classes can be reused throughout the document. Styles attached to IDs trump styles attached to classes.
Other than that, it's entirely up to you and the particular content you are marking up.
Looking at your sample code, I would recommend using an actual header tag instead of a div with an ID of header.
Why not change those to classes and have only the top level container with an ID? That way you can target it with the top level ID.
You should also remove the header DIV and use a H2 or H3 tag.
<div id="content">
<div class="transport">
<h2>Header</h2>
<div class="image"></div>
<div class="right_content">Lots of text</div>
</div>
</div>
Your CSS would look like
#content .transport {}
#content h2 {}
#content .image