Illustrative use of CSS selectors

Dig into the code to find out how each one works.

Basic

universal selector

elements matching "*" (all), have font set here.

element selector

force dt elements uppercase

Marvin
The best paranoia out of this world. Probably.

class selector

Colour elements red with .cls-red

multiple class selector

Colour elements green, and make them bigger, with .cls-green.cls-big

id selector

Make #me bold!

Attributes

attribute selector: simple presence

Make blue an element with attribute data-colour-me-blue: its value is irrelevant.

Please will you colour me blue.

attribute selector: exact value match

Make red and bold an anchor with the href attribute value exactly "/home.html"

Take me home! But take me somewhere else...

attribute selector: substring match

Make an anchor element italic if its href attribute contains the string "assets/"

browse the assets directory.

attribute selector: word match

Make the text green if "grass" is a word in the value of the data-floor-type attribute.

Check out this grass, and this patio

attribute selector: starts with string

Make links bigger if they begin "http"

attribute selector: ends with string

add generated content after to links that end in ".pdf"

attribute selector: particular

Make French text a different color

Structural

descendant selector

Put the span that lives anywhere within a ul into italics.

child selector

make the child div blue, but not a more remote descendant

I am an immediate child.
I am another immediate child.
I am a more remote descendant.

adjacent sibling selector

makes silver the subsequent sibling after the target.

  1. non-sibling non-target

non-sibling non-target.

following siblings selector

makes bold all matched siblings subsequent to the target.

  1. non-sibling non-target

non-sibling non-target.

Pseudo classes: structural

root

:root selects root element. Can also use html in html docs, but :root necessary for other doc types e.g. XML, SVG etc.

empty

:empty selects empty elements. N.B. elements, whitespace and text nodes prevent an element from being :empty. The presence of comment nodes does not prevent their parent element from being :empty.

The middle list item is empty, and has content-after applied by its matched rule

first child

matches the element where it appears as the first child of a parent.

first child of type

matches the element where it appears as the first child of its element type of a parent. (May well not be the first element, though).

last child

matches the element where it appears as the last child of a parent.

last child of type

matches the element where it appears as the last child of its element type of a parent. (May well not be the last element, though).

nth-child

exactly this one, specific, nth child

:nth-child(2) will target exactly the given element when it is the second child element of its parent.

every nth child

:nth-child(2n) - an element of this type will be matched if it is 2 * nth child element of its parent (where n is the series 0 to the number of child elements).

every nth child starting with offset

:nth-child(3n+2) - an element of this type will be matched if it is 3 * n + 2th child element of its parent (where n is the series 0 to the number of child elements). Note that although in this example the offset is +2, the offset may be negative.

every even child

an element of this type will be matched if it is an even child of its parent

every odd child

an element of this type will be matched if it is an odd child of its parent

nth-last-child

exactly this one, specific, nth-last child

:nth-last-child(2) will target exactly the given element when it is the second last child element of its parent.

every nth-last child

:nth-last-child(2n) - an element of this type will be matched if it is 2 * nth-last child element of its parent (where n is the series 0 to the number of child elements).

every nth-last child with offset

:nth-last-child(3n+2) - an element of this type will be matched if it is 3 * n + 2th child element of its parent (where n is the series 0 to the number of child elements). Note that although in this example the offset is +2, the offset may be negative.

nth-of-type

As nth-child, but only elements of the element type to match are included in the evaluation of the child count.

nth-last-of-type

As nth-of-type, but only elements of the element type to match are included in the evaluation of the child count.

Pseudo classes: dynamic

the anchor element's - :link, :visited, :hover, :active

matches a elements in a particular dynamic state.

UI state

typically used with forms, for example:

:target

matches the element with the id corresponding to the value of the fragment identifier portion of the document's URL.

get the target

I am the target!

:lang

matches elements of the specified language. In contrast with the lang attribute selector, this :lang pseudo element takes many document methods of language specification into account (including the lang attribute).

Make Portuguese text a different color:

:not() pseudo-class

matches elements that do not match the negated selector:

Pseudo-elements

Pseudo element syntax uses '::' prefix (cf ':' prefix for pseudo classes). Note that IE8 is buggy and does not recognise the '::' prefix. When supporting IE8, specify ':pseudo-element' then '::pseudoelement' in stylesheet.

first letter

::first-letter matches the first letter within an element

First letter of this paragraph is bigger.

first line

::first-line matches the first letter within an element

The first line of this paragraph is always going to be bold, no matter how long it is. If you resize the viewport, you will still be able to see the first line of this paragraph emboldened. That's how it works.

generated content