Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Multiple class CSS selectors

Thursday, April 26th, 2012 by Servage

CSS has many ways of styling your design. The CSS language itself has evolved over recent years, and with CSS3 there are really powerfull options avilable to replace many effects previously done with images, like gradients, rounded corners etc.

One of the forgotten selectors is the one for multiple classes. I rarely see people use it, but it is so powerfull, and substitutes many unnecessary workarounds with nested div elements or similar. Consider the following example:

<div class="box box_one">Box 1 Content</div>
<div class="box box_two box_active">Box 2 Content</div>

Now you wish to apply some CSS to all “box” elements, but also something to the “box_active”.

.box {
  border: 1px solid #000;
}
.box_active {
  border: 3px solid #cc0000;
}

So far this isn’t anythhing special, but consider wanting to add something to “box_two”, but only if it is also the active box “box_active”. I.e. a css selector for “box_two” if it also has “box_active” class. This can actually be done surprisingly easy:

.box_two.box_active {
  // Custom CSS
}

This is a very powerful – unfortunately often forgotten – CSS selector available for you. Enjoy!

Multiple class CSS selectors, 4.8 out of 5 based on 5 ratings
Categories: Servage, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.