CSS4 Preview – Selectors

CSS is one probably the best bridge between web designers and developers so updates to the CSS spec are very exciting. The W3C recently posted an update to the working Selectors Level 4 spec, and there are many useful updates to be found. Let's have a look at what new CSS selectors and features will be available to us in future browsers!

$E > F

This exciting selector syntax allows for styling of a parent element ( $E ) based on its child element ( F ). One example would be:

/* style the LI element */ ul > $li > p { border: 1px solid #ccc; }

In the case above, the LI element is styled, not the P element! This is a much needed improvement to CSS and we will finally have it! This selector does leave room for confusion; consider the following:

$ol > li:only-child { list-style-type: none; }

The example above styles an OL element with a unique LI child element. It will be interesting to see how often developers use the $ syntax; hugely useful but potential for misuse.

Location Pseudo-Classes - :any-link and :local-link

These pseudo-classes will be used for location-based elements. The :any-link pseudo-class is used for general links, while :local-link is used to identify links targeted within the same host (as opposed to external href 's).

To add an icon to all internal links within your sidebar:

#sidebar a:local-link { background: url(internal.png) 0 0 no-repeat; }

To add another icon to all external links:

:not(:local-link) { background: url(external.png) 0 0 no-repeat; }

These pseudo-classes are welcomed additions, as link styling and communicating location is very important.

Linguistic Pseudo-Class - :dir

The :dir pseudo-class identifies left-to-right or right-to-left text displays:

p:dir(ltr) { /* left to right */ } div:dir(rtl) { /* right to left */ }

Another welcomed addition, especially for those who code for multiple languages.

Reference Combinators

Reference combinators introduce slashes to the fun, mapping out association between compound selectors. Between the slashes are CSS qualified names. Here's an example:

label:matches(:hover, :focus) /for/ input { box-shadow: #fffea1 0 0 8px }

The example above highlights an INPUT element when its LABEL is focused or hovered-over; the association is made by the for attribute of the label. As you can probably tell, the id is implied by the LABEL element's for attribute.

Good Enough?