Reader Paul writes in:
What’s the difference between
.container div { }
anddiv.container { }
?
It’s great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very different things. This is pretty similar to this question from a while back.
Perhaps a good way to explain their difference is reason them out in “plain English”.
.container div
“Select any div element that is a child of any element with a class name of “container”
div.container
“Select any div element that has a class name of “container”
They key difference between them is the space. A space in a CSS selector has very special meaning. It means that the part of the selector that occurs right of the space is within (a child of) the part of the selector to the left. This doesn’t apply to your second example, because it has no space.
The second concept at work here is what is called tag qualifying, which can be a bit confusing. The tag qualified selector is div.container
. It means that it will select only <div>
elements with a class name of “container” and no other elements. Remove the div
and you have .container
which is nearly the same thing only will select any element with that class name. A tag qualified selector has ever-so-slightly more specificity. Personally, I rarely ever use tag qualified selectors. They are less flexible and technically less efficient.
Tag qualified selectors seem to be useful when applying a style to a set of different elements with minor changes.
I use it most often for notes:
Then inline ‘notes’ just have the color and em effect while my ‘div’ notes have a little padding around them and are aligned center. Just keeps me from having to double-up code and I can change it in one place if need-be.
Agreed though – tag qualified selectors are best used rarely.
“.container div” does NOT select the children. It selects the descendants. To update your sentence: ‘Select any div element that is a descendant of any element with a class name of “container”‘
“.container > div” selects only the children.
I’ve always been confused with that – what’s the difference?
@Nile:
“Perhaps a good way to explain their difference is reason them out in ‘plain English’.”
Children are the immediate descendants of a parent, like sons to a father. So “.container > div” will select the elements immediately inside the parent elements with the class “container” attached to them.
Descendant refers to anyone who can be traced through any number of generations of parenthood to an ancestor. Sons and daughters, grandsons and grand-daughters, great-grandsons and great-granddaughters, etc. who can all be traced back in lineage to one ancestor are that ancestor’s descendants. “.container div” will select any descendant, not just immediate children.
I understand it more now. It only grabs direct descendants. 8|-)
thanks for the explanation
Another important thing to point out for clarification is :
div .container
is also different from
div.container (again, pay attention to the space).
This will select any descendants of any div on the page that has a class of container. Not that it’s particularly useful, but might be a cause of confusion for those new to CSS
Also:
.note {}
will execute faster than
div.note {}
…random information.
Really? Why is that?
There are less requirements, so there’s less to check against. That makes sense.
You won’t see any difference.
Ok, that makes sense.
But is there a big performance difference? I know styling ids are faster than classes, but the difference is so small that it shouldn’t be considered.
Anyway, anybody know if there’s a benchmark for measuring CSS speed?
Jamie’s not wrong, doing so is generally discouraged though; it reduces the re-usability of your classes, and as Bill said- the performance increase is negligible.
Renan, it would be browser/rendering engine independent and I don’t know how you’d go about it.
I do know that until you’re using ‘CSS-like selectors’ in JavaScript, you do not need to be thinking about this.
I have always used the simple code like .”class” only..
I think to beginners this article is confusing because you are trying to explain two differences at once. The examples differ both in order (div container, container div) and in selector (dot vs space dot).
Thanks for clearing this up Chris, it can be hard to get your head around this stuff.
This is a fundamental key to understanding CSS IMO and the very problem I’ve been asked about countless times. It needed to be said Chris, nice one! :)
This is the one question I love to ask interview candidates who proclaim their expertise in CSS. Most can’t answer it correctly. Even fewer haven’t even heard of specificity
You “interview candidates”. Wow, color me impressed. In such a position of power, (interviewing! candidates!), shouldn’t you be more careful with your double negatives?
“Even fewer haven’t even heard of specificity”
.container div
This selects divs that are *descendants* of .container, not children (children implies one level).
I can’t believe that I didn’t know this before! I’ve always just used the two interchangeably and sometimes ran into issues where I didn’t understand why my styles weren’t being applied correctly. This is one of those “small” bits of information that I think will really be a BIG help.
It’s so counter intuitive that the more specific your selectors are, the less efficient they become.
Oh well!
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
This may help everyone to understand completely on descendant and child selectors.
There is a difference between div.container and .container and that is the cascading specificity.
Each type of selector is assigned a numeric value. A higher specificity will overwrite the less specific rule.
Selector: .container Specificity: 10 (one class selector)
Selecor: div.container Specificity: 11 (one class selector and one HTML selector)
In other words div.container will overwrite properties that inherit over .container because div.container is more specific.
Thanks for sharing!
The two div-s seems to have the same function…but as we can see that’s not true.