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.:

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