CSS is all about being specific. Styling the whole house white but window panes orange and leaving the kitchen walls somewhat italicised and looking wobbly. Many a night of grunting can be saved by knowing which elements to target and the right order in which to target them. If you have dabbled in subtheming with Drupal, by now you might have realised (custom functionality set aside) that some of the more vigorous head scratching will involve some css files, granted you care about doing it right. It gets especially tricky when you have to deal with drop down menus hence this series in which I will explain some css hokery-pokery...

The first post in this series will talk about descendants and inheritance in brief. (I'm not talking about a parent and child specification but what I prefer to call "sibling selectors").

Consider the following examples:

<div class=”balls”>
  <div class=”tennis”>
<div class=”balls tennis cricket”>

To style tennis balls, we would use the following:

.balls .tennis { color: red; }

Well as far as siblings are concerned however, neither one should act as parent. (This applies in real life as well.) So, in plain English to target a child (born off siblings), we have to remove the space and it becomes:

.balls.tennis { color: red; } 

Application of this type has no limits, especially when it's in the wrong hands. One last example, an extreme one:

<div class=”smart phone android” id=”htc”><h1>title</h1>

This rule would actually work:

.smart.phone.android#htc h1 { color: white; }

This is a simple trick you can use to style menus and add another level of specificity to your css! I hope you enjoyed the post, if you have any requests on subjects you want covered, just drop a comment or tweet @mukwenhac.

Thanks!