CSS Selectors Demo

1. Element selector

This paragraph is styled by the element selector p. Every paragraph on this page gets the same font size, colour and line spacing.

2. Class selector

A class can be reused on many elements. The two boxes below share the class .note, so they look the same.

This box uses the class "note".

This box also uses the class "note", proving classes are reusable.

3. ID selector

The main title at the top of the page has id="page-title". The rule #page-title styles only that single element, because an ID can only be used once per page.

4. Pseudo-class selectors

a) .hover

Move your mouse over the button to see it change colour.

b) :nth-child(even)

Every even item in this list is shaded automatically.

Item one (odd)
Item two (even, shaded)
Item three (odd)
Item four (even, shaded)
Item five (odd)