CSS Selectors Guide

We have already discussed CSS selectors that could be used without worrying about browser support in our previous articles. Now we are going to talk about the selectors that can quite useful in some browsers, but fail to work cross-browser.

The > Combinator

ul>li { *properties* }

This > combinator targets the specified elements exactly 1 level below the source level. Thus if look at an example we offer, the selector will target all li elements that are nested right below the ul element.

However, IE6 doesn’t support this selector.

The + Combinator

h2+p { *properties* }

The + combinator targets an element on the same level, directly following the source target. In the example above, it will target every p tag directly preceded by an h2 tag.

IE6 doesn’t support this selector too.

The ~ Combinator

p~p { *properties* }

This combinatory selects all elements on the same level, following the source target. It is quite similar to the + combinator but more flexible.

IE6 doesn’t support this selector.

The Attribute Selector

input[type=text] { *properties* }

The class and id selectors are shorthands for specific attribute selectors. For example, the .nav selector can also be written as ul[class=nav]. Note that an attribute selector can be defined on an html tag, while the class selector is used separately from html tags.

The selector isn’t limited to the “=” operator, but can also accept *=, $=, ^=, |= and ~= operators. However, cross-browser support for all these operators is not the best thing to mention about.

The Pseudo-Classes

div:hover { *properties* }

Pseudo-classes always start with a : followed by the class itself, and can be attached to any selector. Pseudo-classes refer to the context or the behavior of an element. In very specific cases they can be made to work cross-browser (the :active class on the a tag for example) but most of the pseudo-classes have limited to no cross-browser support.

The Pseudo-Elements

div::after { *properties* }

Pseudo-elements resemble pseudo-classes quite a lot. They share the same syntax although this will change for pseudo-elements introduced in css3. The single : will be replaced by a double ::. Pseudo-elements can help to target specific parts of an element, or insert completely new elements before or after the source element.

In the example above, a virtual structural element is added after all divs. In this virtual element, content can be inserted which can then be styled. This virtual element will not show up in the dom however.

Complex CSS Rules

.box>*:first-child~* { *properties* }

Well, the above example, can be just an exercise for you to solve. So, is everything clear?

Reference: www.onderhond.com/blog/work/css-selectors-pt2