CSS Selector Syntax

2008 Oct 17

Pattern Matches

* any element.

E any E element (i.e., an element of type E).

E, F any element in the comma separated list: e.g. E and F (list can be longer).

E F any F element that is a descendant of an E element (can be 3 or more: E F G).

E > F any F element that is a child of an element E.

E + F any F element immediately preceded by an element E (i.e. F is next sibling of E).

E[foo] any E element with an attribute named foo.

E[foo][fee] any E element with both the foo and fee attributes.

E[foo="warning"] any E element whose foo attribute value is exactly equal to "warning".

E[foo~="warning"] any E element whose foo attribute value is a list of space-separated values, one of which is exactly equal to "warning".

E[foo^="xyz"] any E element whose foo attribute value begins with xyz.

E[foo$="xyz"] any E element whose foo attribute value ends with xyz.

E[foo*="xyz"] any E element whose foo attribute value contains xyz.

E[lang|="en"] any E element whose lang attribute has a hyphen-separated list of values beginning (from the left) with en; e.g. <span lang="en-us">Yo!</span>.

E#myid any E element with ID equal to myid.

#myclass Same as *#myclass

E.myclass any E element with class equal to "myclass". Requires the element has the attribute class="myclass".

.myclass Same as *.myclass

.c1.c2

Matches when both classes, c1 and c2 are present (in any order), e.g.

.c1 { font-weight: bold; }
.c2 { font-style: italic; }
.c1.c2 { background: #999999; }

To be <span class="c1">
or not to be</span><br>
<span class="c2">is a</span>
<span class="c1 c2">
tautology</span>

To be or not to be
is a tautology.

**Pseudo classes**
Pattern	Matches
@page :first	applies to first page.
@page :left	applies to left or even pages.
@page :right	applies to right or odd pages.

E:first-child	element E when E is the first child of its parent (not supported by IE).
E:first-letter	the first letter of block-level element E (property limits).
E:first-line	the first line of block-level element E (property limits).

E:link	element E if E is the source anchor of a hyperlink of which the target is not yet visited, link.
E:visited	element E if E is the source anchor of a hyperlink of which the target has already been visited, vlink.

E:active	element E activated by user input (clicking while mouse button is down).
E:focus	element E that has input focus, e.g. `a:focus { outline: invert; }`
E:hover	element E that has mouse cursor over it.

E:lang(c)	element of type E if it is in (human) language c (the document language specifies how language is determined).

E:before	prepends generated content with optional style.
E:after	appends generated content with optional style.

The class attribute in an element can be a space separated list of class names. The selector matches if its class name matches any of the class names in an element.

The difference betwee class and id is that only one element can have a given id. Also ids cannot be commbined, since id attributes do not allow a space separated list of word. Class and id val;ues are case sensitive.

The above forms can be combined, e.g.:

E < F + G {...}
a.external:link {...}
a:hover:link {...}

Note that a pseudo-class selector must be last (therefore only one can be used).

*Properties permitted on specified pseudo-class*
:first-letter	:first-line
all font properties	all font properties
all color properties	all color properties
all background properties	all background properties
all margin properties
all padding properties
all border properties
line-height	line-height
text-decoration	text-decoration
text-transform	text-transform
vertical-align (if float is set to none)	vertical-align
float
letter-spacing (added in CSS2.1)	letter-spacing
word-spacing (added in CSS2.1)	word-spacing
clear (CSS2 only; removed in CSS2.1)	clear
text-shadow (CSS2 only)	text-shadow