Using CSS selectors is not a difficult skill–all of us who use CSS use selectors on every line of code that we write.  However, as not as many know, there are more exotic selectors available.

Blah blah blah.  You can read all about CSS selectors at W3, and I don't want to rehash what has already been fully documented.  So instead, let me go a different direction.

Why, you might ask, would I possibly want or need to use a fancy CSS selector like ":first-child" or something more granular like an attribute selector (a[href="http://askaninja.com"])?

Well, maybe you'll never want or need to.  If you have the luxury of coding everything you do from scratch, you'll probably find little use for these.  However, most of us do not have ideal circumstances like this.

Consider this:  Where I work, we are using an enterprise information management software for our employee intranet.  While the product itself is quite powerful, whoever built the layouts and templates that come boxed with the products are certifiable idiots.  Strewn across hundreds of layout files in obscure, inaccessible (well, at least to me…) folders are inumerable styles, both external and inline, that handle the "design" of this product.

Can anyone say nightmare?  Believe me, I have job security for the rest of my life just trying to get this beast into line.  So where do fancy CSS selectors come into play?  Well, as most terribly designed CMS templates are prone to do, this software depends largely on infinitely nested tables–some classed, some not–to handle layout.  In many cases, the very best I can do is hook onto some high-level class and use a selection schema to hit the element I need to grab.  

But even more than this, fancy CSS selectors allow me to have some control over what the users of the system try to shove out there.  Unfortunately for accessibility, but manageble for me, the WYSIWYG that comes boxed with this product spits out <font> tags everywhere.  While this is absolutely aggravating, it is suprising easy to overcome.  

For example, you might think that if a font tag has, say, a "size" set "inline", that it cannot be controlled with CSS.  WRONG!  Using something like so — font [size='3'] — I can grab every font tag with a font size of '3' and make it the normal size that I think font sizes should be.  So even though the users try their best to pump out 20pt bright pink text, using fancy CSS selectors lets me maintain some dignity over my design and preserves the sanity of all those who have to read it.

Okay, so I've rattled on long enough about this.  If you haven't gotten into fancy CSS selectors yet, give them a try.  And if you have, I'd love to hear about how you've used them to get out of some sticky spots or to create a clever solution.