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