Skip Navigation

▼Blog

Three pseudo classes beyond LOVE/HATE

I thought I knew all I needed to know about CSS, at least as far as modern browsers allow me, after reading a string of books about it over the past two years. (CSS Zen Garden is the best.) Somewhere along my studying, I blocked out certain rules, in most cases because Internet Explorer 6 doesn’t support them.

With Internet Explorer 7 more than two years old, used more than IE 6 and IE 8 coming soon, it’s time for designers to adopt more advanced CSS features. (IE seems to be losing market share as well.) The Microsoft developers’ site outlines IE’s support of CSS. Today we’ll look at pseudo classes.

LoVe/HAte is a handy way of remembering which way to order your link styling in CSS by :link, :visited, :hover and :active. (Not following this order will screw up things. Really. Trust me.) These familiar pseudo classes specify the look of your hyperlinks.

But wait — there’s more — and they don’t even have to be used for links!

:focus is a way to add focus to an element, like a form, and works now in Firefox and will supposedly work in IE 8. This is fantastically useful and a great way to make your site’s forms user friendly. Example.

:lang, again, not in Internet Explorer until version 8, but allows you to specify language of an element, like a quote box, and supply custom quotation marks. You can also use it in combination with XHTML to declare the language attributes of text in a document.

:first-child, now a part of IE 7, matches a style to the first child element of any element. For example, this selector could specify that the first paragraph of a document turn blue, but the rest of the paragraphs remain the default paragraph color.

Hello, visitor! Things seem a little "incomplete," wouldn't you say? All I can say is 'I'm working on it.' This should all look more complete very soon. (Click box to close.)