dinky pocket book
CSS Selectors
Simple selectors
assume throughout that E and F are elements,
they can have attribute foo
e.g. <e foo="bar">
you can replace these with any elements or attributes.
In HTML, elements in CSS can be uppercase like these examples.
In XHTML, elements must be lower case.
Classes and IDs are always case sensitive
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
n can be replaced with an expression
in all following cases
n can be (odd), (even) or expressions such as (3n + 1)
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
http://www.w3.org/TR/css3-selectors/
