Menu
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.
337
We aren't limited to only two here, we can combine as many classes and IDs into a single selector as we want.
Use the getElementsByClassName method to get elements by multiple class names, e.g. document. getElementsByClassName('box green') . The method returns an array-like object containing all the elements that have all of the given class names.
SASS/SCSS code to select multiple select classes in the same item. In SCSS, parent selector & symbol is used. This & will be resolved side by side after compilation for CSS.
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
138
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
