CSS Selectors

Universal

*	elements in the default namespace
|*	elements in no namespace
ns|*	elements in the namespace with prefix ns
*|*	elements in any or no namespace

Type

div	div elements in the default namespace
|div	div elements in no namespace
ns|div	div elements in the namespace with prefix ns
*|div	div elements in any namespace or in none

Descendant

div p	p elements that are within a div element
* p	p elements that are within any element (ie. not the root element)

Child

div > p	p elements that are the direct children of div elements
p > *	any elements that are the direct children of p elements

Direct Sibling

div + p	p elements that directly follow div elements
p + *	any elements that directly follow p elements

Indirect Sibling

div ~ p	p elements anywhere after div elements
p ~ *	any elements anywhere after p elements

Attribute

*[href]	elements with an href attribute
*[align="right"]	elements with an align attribute of right
*[href^="http:"]	elements with an href attribute beginning with http:
*[href$=foo]	elements with an href attribute ending with foo
*[href*=foo]	elements with an href attribute containing foo
*[words~=foo]	elements with a words attribute containing the word foo
*[lang|=en]	elements with a lang attribute equal to or beginning with en

Class

p.intro

p elements with a class attribute containing the word intro

ID

p#intro

p elements with an id attribute of intro

Link

:link	elements that represent links
a[href^="mailto:"]:link	elements that link to an email address

Lang

:lang(en)	elements whose specified language is English
q:lang(fr-CA)	quotes whose specified language is French (Canadian)

Contains

p:contains("synergy")

paragraphs containing the text "synergy"

Root

:root	the root element of the document
html:root	html root elements
:root > *	children of the root element

Empty

div:empty

every empty div element

Not

*:not(p)	every element except p elements
div:not(:empty)	every non-empty div element
a:not([href])	every a element without a href attribute

First Child

div > :first-child

the first child of a div element

Last Child

div > :last-child

the last child of a div element

Only Child

div > :only-child

the only child of a div element

First of Type

div > p:first-of-type

the first p element child of a div element

Last of Type

div > p:last-of-type

the last p element child of a div element

Only of Type

div > p:only-of-type

the only p element child of a div element

Nth Child

div > :nth-child(3)	the third child of a div element
div > :nth-child(even)	every even child of a div element
div > :nth-child(odd)	every odd child of a div element
div > :nth-child(3n)	every third child of a div element

Nth Last Child

div > :nth-last-child(3)	the third last child of a div element
div > :nth-last-child(even)	every even last child of a div element
div > :nth-last-child(odd)	every odd last child of a div element
div > :nth-last-child(3n)	every third last child of a div element

Nth of Type

div > p:nth-of-type(3)	the third p element child of a div element
div > p:nth-of-type(even)	every even p element child of a div element
div > p:nth-of-type(odd)	every odd p element child of a div element
div > p:nth-of-type(3n)	every third p element child of a div element

Nth Last of Type

div > p:nth-last-of-type(3)	the third last p element child of a div element
div > p:nth-last-of-type(even)	every even last p element child of a div element
div > p:nth-last-of-type(odd)	every odd last p element child of a div element
div > p:nth-last-of-type(3n)	every third last p element child of a div element

Pseudo-elements

::before	This pseudo-element can be used with the content property to add generated content not present in the original document. For example, p::before can be used to insert text at the beginning of every paragraph element.
::after	This pseudo-element can be used with the content property to add generated content not present in the original document. For example, p::after can be used to insert text at the end of every paragraph element.
::marker	This pseudo-element is for applying style to list item markers.
::first-letter	This pseudo-element is for applying style to the first letter of an element.
::footnote-call	This pseudo-element is for applying style to footnote calls, the numeric anchors in the main text that refer to footnotes.
::footnote-marker	This pseudo-element is for applying style to footnote markers, the numeric markers placed in front of the footnote text.