-

dinky pocket bookCSS 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/

-