Understanding those p*sky CSS selectors read more →

Selectors define which part(s) of your (X)HTML document will be affected by the declarations you’ve specified

*

Matches any element, Universal selector h1 { font-family: sans-serif }

E

Matches any E element (i.e., an element of type E), Type selectors h1 { font-family: sans-serif }

E F

Matches any F element that is a descendant of an E element, Descendant selectors h1 em { color: blue }

E > F

Matches element E when E is the first child of its parent, the :first-child pseudo-class body > P { line-height: 1.3 }

E:first-child

Matches any F element that is a child of an element E, child selectors div > p:first-child { text-indent: 0 }

E:link, E:visited

Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited), the link pseudo-classes a:link { color: red }

E:active, E:hover, E:focus

Matches E during certain user actions, he dynamic pseudo-classes a:hover { color: yellow } /* user hovers */

E:lang(c)

Matches element of type E if it is in (human) language c (the document language specifies how language is determined), the :lang() pseudo-class html:lang(fr-ca) { quotes: '� ' ' �' }

E + F

Matches any F element immediately preceded by a sibling element E, adjacent selectors h1 + h2 { margin-top: -5mm }

E[foo]

Matches any E element with the “foo” attribute set (whatever the value), attribute selectors span[class=example] { color: blue; }

E[foo="warning"]

Matches any E element whose “foo" attribute value is exactly equal to “warning”, attribute selectors h1 { font-family: sans-serif }

E[foo~="warning"]

Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to "warning", attribute selectors

E[lang|="en"]

Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with "en", attribute selectors h1 { font-family: sans-serif }

DIV.warning

Language specific. (In HTML, the same as DIV[class~=“warning”].), class selectors

E#myid

Matches any E element with ID equal to “myid”, ID selectors h1#chapter1 { text-align: center }