Progetti
Software
Formazione
Links & dritte
 
Sistemi
Elettronica
Matematica
Tai Ji Quan
Giada Adriani
 
Tesi
Appunti
Recensioni
 
Pillole
Racconti
Romanzi
Ospiti
 
Giochi
Eventi
Work-e
Ma.Ste.R.
 
Links
Cerca
Chi sono
Contatti
Mappa del sito
Arrows down Arrows up

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