Adriani Home Page

The CSS3 selectors

This page shows some examples about the selectors introduced with CSS3.
We can divide the CSS3 selectors in three categories:

Preceding selector (1): defined by the ~ simbol, complementary to the CSS + selector
Attribute selector (3): new expressions ^=, $= and *= for attributes
Type pseudo-elements (5) - selecting an element type by its position: :first-of-type, :last-of-type, :only-of-type, :nth-of-type(), :nth-last-of-type()
Child pseudo-elements (4): :only-child, :nth-child(), :nth-last-child(), :last-child
Form selectors (3): :enabled, :disabled, :checked
User selection (2): :target and ::selection
General pseudo-elements (3): root, empty, not()

To see the CSS definitions click on one of the show code labels below, or have a look to the HTML source of this page.

A paragraph having class attributes and containing some span elements.
A span having attribute foo="a-test", a span having attribute foo="another" and a span having attribute foo="a clean one".
A span having attribute foo="file.txt", a span having attribute foo="filetxt", and a span having attribute foo="file is txt".
A span having attribute foo="substring" and a span having attribute foo="sub strings".

A span next (directly) to the paragraph having class attributes.
A span preceded (not directly) by the paragraph having class attributes.

Show code

The 1st address

The 2nd address

The only span of this list

The 3rd address

The 4th address

Show code

The 1st blockquote

The 2nd blockquote

The 3rd blockquote, with a single span element

The 4th blockquote, with two span (span) elements

The 5th blockquote

The 6th blockquote

Show code

Radio button (:checked is not fully supported)
Check box (:checked is not fully supported)

Show code

A simple division containing some reference anchor elements, and some href links pointing to these elements. Click on the different links to see how the CSS3 property change the target anchor.
Try also to select some text: it should change color, depending by your browser (see CSS code).

Show code

A paragraph containing some text, a filled "abbr" tag and an empty one "".

A paragraph having id=unique. Among the children of this paragraph, only the content of the cite element will be left unchanged (this one), i.e. will not change color.

Remark: in order to use the :root selector, the CSS definition should be set within the head element, in order to be loaded before the page, since the :root is usually the html element of the document.

Show code