dinky pocket bookCSS Selectors
Simple selectors
universal selector, match any element
*
type (or element) selector
E
ID selector an E element with ID equal to "myid", e.g. <e id="myid">
E#myid
class selector an E element whose class is "myclass", e.g. <e class="myclass">
E.myclass
Combinators & negation
descendant combinator to style an F element, which is a descendant of an E element
E F
child combinator an F element which is the direct child of an E element
E > F
adjacent sibling combinator an F element that is immediately preceded by an E element
E + F
general sibling combinator an F element preceded at some point by an E element
E ~ F
negation pseudo-class an E element that does not match simple selector s
E:not(s)
Attribute selectors
element E with a "foo" attribute
E[foo]
E’s attribute foo
, value exactly equal to bar
E[foo="bar"]
E’s attribute foo
, value is whitespace-separated values, one of which is exactly "bar"
E[foo~="bar"]
E’s attribute foo
, value begins exactly "bar"
E[foo^="bar"]
E’s attribute foo
, value ends exactly "bar"
E[foo$="bar"]
E’s attribute foo
, value contains substring "bar"
E[foo*="bar"]
E’s attribute foo
has a hyphen-separated list of values beginning (from the left) with "en"
E[foo|="en"]
Structural pseudo-classes
an E element, the n-th child of its parent
E:nth-child(n)
an E element, the n-th child of its parent, counting from the last one
E:nth-last-child(n)
an E element, the n-th sibling of its type
E:nth-of-type(n)
an E element, the n-th sibling of its type, counting from the last one
E:nth-last-of-type(n)
an E element that is the document root, i.e. html
E:root
Structural pseudo-classes
an E element, first child of its parent
E:first-child
an E element, first sibling of its type
E:first-of-type
an E element, last child of its parent
E:last-child
an E element, last sibling of its type
E:last-of-type
an E element, only child of its parent
E:only-child
an E element, only sibling of its type
E:only-of-type
an E element that has no children (including text nodes)
E:empty
Pseudo-classes
matches a link E when E is a link and not visited, hovered over focused on or active
E:link
the href target of the link E has been visited
E:visited
the link E has been activated
E:active
any element E when hovered over with a mouse
E:hover
the link or form control E when tabbed to with a keyboard
E:focus
element E is the fragment in the referring URI
E:target
an element of type E in language "fr"
E:lang(fr)
Forms & Pseudo-elements
a user interface element E which is enabled
E:enabled
a user interface element E which is disabled
E:disabled
a user interface element E which is checked
E:checked
the first formatted line of an E element
E::first-line
the first formatted letter of an E element
E::first-letter
generated content before an E element
E::before
generated content after an E element
E::after