Grow your CSS skills. Land your dream job.

What’s the Difference?

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    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:

    .note { color: grey; font-style: italic; }
    div.note { text-align: center; padding: 10px; }

    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.

  2. Brendan Sullivan
    Permalink to comment#

    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

  3. Permalink to comment#

    Also:

    .note {}

    will execute faster than

    div.note {}

    …random information.

    • Renan Couto
      Permalink to comment#

      Really? Why is that?

    • Permalink to comment#

      There are less requirements, so there’s less to check against. That makes sense.

    • bill
      Permalink to comment#

      You won’t see any difference.

    • Renan Couto
      Permalink to comment#

      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.

  4. Permalink to comment#

    I have always used the simple code like .”class” only..

  5. Permalink to comment#

    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).

  6. Thanks for clearing this up Chris, it can be hard to get your head around this stuff.

  7. 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! :)

  8. .container div

    This selects divs that are *descendants* of .container, not children (children implies one level).

  9. 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.

  10. It’s so counter intuitive that the more specific your selectors are, the less efficient they become.

    Oh well!

  11. Permalink to comment#

    http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

    This may help everyone to understand completely on descendant and child selectors.

  12. 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.

  13. Permalink to comment#

    Thanks for sharing!
    The two div-s seems to have the same function…but as we can see that’s not true.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".