Best IT Recipes

Multiple classes in CSS Selector

I see such a selector

.class1 .class2 .class3 { }

What does it mean?

I used several class selectors with no spaces. Space means a descendant, but it does not make sense for classes.

+47
css css-selectors
Dec 05 '10 at 3:29
source share
5 answers

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 above CSS will stylize all elements under class3 that are under class2, which are under class 1.

i.e. let's say it was a style

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

This will make the text red, which is equivalent to the following:

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

Finally, the following will do nothing,

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

Edit: If the markup was next,

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

It will work and display the text in red.

Note: <IE7 may have problems 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

+68
Dec 05 2018-10-12T00:
source share

Other answers give you the explanation you need; I will use a practical use case to feed any curiosity.

A common real-time use case for multiple class selectors separated by descendant compilers is when a site has a different body class for specific pages or specific devices.

For example, consider this markup for a simple website. 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 setting may be to place #content between .sidebar s using some floating blende that I will not connect to.

On a mobile device, in addition to changing the entire size for a small resolution, perhaps the designer wants to do away with the side panels in order to bring back some sort of horizontal screen space. In addition to media processes, it is much easier to use server-side code to detect mobile browsers and the body tag with the corresponding class (for example, ASP.NET C # example):

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

Where your example comes in handy. The designer simply 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 general layout of the sidebar, the size of the shave page and all this jazz, but again this is another way to get closer to this. I just give a quick, practical example of how several CSS selectors in a hierarchy can be used in CSS.

+8
Dec 05 2018-10-12T00:
source share
 div{ padding: 5px; border: 1px solid #f00 } .class1 .class2 .class3 { background-color: #000; }

will change the background of the innermost div:

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

http://jsfiddle.net/C7QZM/

In other words, this means applying style to 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/

+4
Dec 05 '10 at 3:40
source share

This still means a descendant, and it makes sense for classes if you have nested hierarchies. For example:

 .blackOnWhite .title { color:black; } .whiteOnWhite .title { color:white; }
+3
Dec 05
source share

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 values, separated by spaces, which include “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

0
Dec 05 '10 at 3:36
source share


More articles:


All Articles