Multiple classes in CSS Selector

Let's say there's a page with the following markup,

<div class="class1">
  <div class="class2">
    <div class="class3">
      Some page element(s).
    </div>
  </div>
</div>

The CSS you provided would style all elements under class3, which are under class2, which are under class1.

i.e. let's say this was the styling,

.class1 .class2 .class3{
  color:red;
}

It would render the text as red, which is the equivalent of the following,

div.class1 div.class2 div.class3 {
  color:red;
}

Finally, the following would do nothing,

.class1.class2.class3{
  color:red;
}

Edit: If the markup instead was the following,

<div class="class1 class2 class3">
      Some page element(s).
</div>

It would work and render the text in red.

Note: < IE7 might have issues with the above...

http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/ http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html


The other answers provide you with the explanation you need; I'll chip in with a practical use case just to feed anyone's curiosity.

A common real-world use case for multiple class selectors separated by descendant combinators is when a site has a different body class for certain pages, or certain devices.

For example, consider this markup of a simple web site. Besides the header and footer, it also has a content column and two sidebars:

<!-- DTD, html, head... -->
<body>
    <div id="wrap">
        <div id="header">
          <h1>My Site</h1>
        </div>

        <div id="content">
          <!-- ... -->
        </div>

        <div id="side1" class="sidebar"><!-- ... --></div>
        <div id="side2" class="sidebar"><!-- ... --></div>

        <div id="footer">
          <p>Copyright LOLOLOL</p>
        </div>
    </div>
</body>
</html>

The default setup might be to arrange #content between the .sidebars, done with some floating trickery I won't get to here.

On a mobile device, besides resizing the whole thing for the small resolution, perhaps the designer wants to do away with the sidebars to reclaim some horizontal screen estate. Aside from media queries, there's also the much simpler option to use server-side code to detect mobile browsers and tag body with a class accordingly, like this (ASP.NET C# example):

<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>

That's where your example comes in handy. The designer just uses the following rule to hide the sidebars from mobile devices:

/* This would appear just beneath the .sidebar { ... } rule */

.mobi .sidebar {
    display: none;
}

Of course, the same browser detection code could be used to hide the sidebar markup altogether, shaving page size and all that jazz, but again that's just another way of approaching this. I'm just giving a quick practical example of how multiple class selectors in a hierarchy can be used in CSS.


div{
    padding: 5px;
    border: 1px solid #f00
}
.class1 .class2 .class3 {
   background-color: #000;
}

will change the background of the most inner div:

<div class="class1">
  <div class="class2">
     <div class="class3">
     </div>
  </div>
</div>

http://jsfiddle.net/C7QZM/

In other words it means apply style for class3 which is a child of class2 which is a child of class1.

If you ignore spaces your style rule will apply to the following:

.class1.class2.class3{
   background-color: #000;
}
<div class="class1 class2 class3">
</div>

http://jsfiddle.net/C7QZM/1/


It still means descendant and it does make sense for classes if you have nested hierarchies. For example:

.blackOnWhite .title {
    color:black;
}

.whiteOnWhite .title {
    color:white;
}

Tags:

Css

Css Selectors

Recent Posts