What’s the Difference?

Avatar of Chris Coyier
Chris Coyier on

Reader Paul writes in:

What’s the difference between .container div { } and div.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.