Special Selectors in CSS

In CSS the selector takes on one of three main forms:

.classname { styling-rules: ... ; }
#idname { styling-rules: ... ; }
tagname { styling-rules: ... ; }

But in fact there are more selector types than just class, id, and tag-based styles. In this series of examples, some of the other selectors available to CSS stylists are explored. However, be forewarned, this is where the browsers, and especially IE6, fall off the standards wagon - so do be careful in using these selectors if you have IE6 or other earlier browsers in your user community. Best way to check that out is to get some of the Free Google Analytics reports or the Web statistics offered by your hosting service. The screenshot below shows the browser usage numbers provided by ICDsoft for their hosted sites using:

So now lets look at some of the various special selector types.

Multiple Classes

For example watch how we can combine two or more styles together:

.alert {color:red;}
.italicbold { font-weight: bold; font-style: italic;}
are the two separate styles. However, when combined together we want
.alert.italicbold{ background: yellow;}

This type of situation arises more often than not; I especially find it occurring in documentation where I want to alert or warn people with underlines and bold but then up the warning a notch with a cautionary red lettering or yellow background. All four major browsers (FireFox, IE7, Opera, and Safari) handle multiple classes correctly.

Descendant Selectors

Descendant selectors are all about tags contained with another tag. For example, in the example above the <h2> tag which creates our light blue highlight box has <span> as a descendant tag used three times - once each with the .alert then .italicbold and then .alert.italicbold class styles - all inside the <h2> tag. Hence <span> is within or descendant from <h2>. CSS allows users to recognize this with the Descendant Selector.

Frequently I want the .under-bold style to standout - especially when used in a <h2> blue box as in this case. So I add this CSS style:h2 .under-bold{ font-weight: bold; text-decoration: underline; color:green;} and voila it stands out in gaudy green text.

Again this situation arises in cases where you want to change the font size or styling in when text falls within a table within a certain block - then the rule could be for example 3 deep as in div.footer table p. Be careful here - the under-bold style is not carried along you must repeat it along with the new color:green property as seen in the example above.

Adjacent Siblings Tags

There are combinations of selectors and tags that really appear to work against you. The combination that has me pulling my hair is the <h1> tag followed by the <p>. Yep, too much line spacing - in some sites I am working on this drives me up a wall because Dreamweaver constantly adds back in a <p> tag whenever I edit a block of text that it thinks I should have enclosed within a <p> tag.

Adjacent Sibling tags come to the rescue. Just add this styling to your stylesheet:
h1 + p { margin-top:0;}
and your frustration is at an end except for IE6 and earlier users who should be penalized in any case for not updating their browser to Firefox, Opera or Safari.

Here is another example of where I use Adjacent Sibling tags. Whenever I have a list inside a table I want the font bold for the first list element. Hence the following:
td + ul + li{ font-weight:bold}

    Looks like this:
  • make your point
  • and then another.
Unfortunately this does not work in Dreamweaver preview nor some of the major browsers; so it is a styling I avoid unless I can guarantee on an Intranet for example, that all browsers used will be the same.

First-Child Pseudo Class

I still want to bold the first element of a list (or a table or a series of paragraphs). I want the first element to stand out - and that's what the first-child pseudo class allows me to do. The pseudo class applying a rule to the first member of series of equivalent child tags. The results for our list are:

This latter pseudo class works well across most browsers so I will use this rule preferentially over the Adjacent Sibling method.

The special selectors are the way that CSS provides conditional or "if" statement like rules to stylings. The problem is that for many of these selectors IE is way behind and even the top four browsers stumble. For example, when trying three rules in a row - like div > ul > li , I found many browsers unable to apply any stylings whatsoever. So test carefully whenever applying these special selectors especially in groups of 3 or more.