60

I see a selector like this,

.class1 .class2 .class3 {
}

What does this mean?

I've used multiple class selectors without spaces. Space means descendant but it doesn't make sense for classes.

Improve this question
1
  • Because classes are used in the document without any hierarchy, this descendant rule is messing up part of page. I changed the rule to use ID and types to identify the special hierarchy and it works now. Commented Dec 5, 2010 at 14:48

5 Answers 5

Reset to default
84

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

If this is indeed the case, it's impossible to figure out what rules apply because the classes are not used in a hierarchy in the HTML.
@ZZ Coder - it is indeed possible to figure out what rules apply: browser starts applying rules form parent and override them with child rules if they differ
@Amit G: in your code, may i know, where is the two more </div> tag.. I just asked.. thanks..
@saina Hey Saina, not sure what div tags you're referring to, could you clarify what exactly you're trying to do?
8

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.

Improve this answer

Comments

5 
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 remove the 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/

Improve this answer

6 Comments

It has to be a child, go ahead and try it. To acheive all 3 class behaviour you would need to use .class1.class2.class3 construction, without spaces.
@negative what if you want to give a unique values for either class1 or class2 or class3???
if one wants to give the same background-color for all divs , why don't you just metnion for the parent div???
@gov for unique values give styles to unique items: .class1{background-color:#333;} .class2{background-color:#666;} .class3{background-color:#999;}. @gov that is what you usually do if you want to give same bg color for all divs, actually I've never met that construction on practice, but may be there are some cases where you will need it.
@negative , got it now , if you have any common property's among three we can group them like that instead of repeating code right.
|
3

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;
}
Improve this answer

2 Comments

what he asked is something different??
@gov What @01001111 is showing is an example of when there would be a good reason to use the hierarchy of the document to select the same class and provide different styles. (Though, of course, no one would be so foolish to name their CSS classes based on the intended styling in reality.)
0

To match a subset of "class" values, each value must be preceded by a ".", in any order.

Example(s):

For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine":

p.pastoral.marine { color: green }

This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".

http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html

Improve this answer

1 Comment

I like your answer even though you did not answer the original question, because you linked to and quoted the answer that I was actually looking for. So, thank you for writing it! :-D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.