Servage Magazine

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!