In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns are called selectors and may range from simple element names to complex patterns. If all conditions in the pattern are true for a certain element, the selector matches the element and the appropriate style will be applied when the element is rendered in a CSS-capable browser.
| Pattern | Meaning | Selector Type |
|---|---|---|
| * | Matches any element. | Universal selector |
| E | Matches any E element (eg h2,span) |
Type selector |
| E F | Matches any F element that is a descendant of an E element | Descendant selector |
| E > F | Matches any F element that is a child of an element E | Child selector |
| E + F | Matches any F element immediately preceded by an element E | Adjacent selector |
| E[foo] | Matches any E element with the “foo” attribute set (whatever the value) | Attribute selector |
| E[foo=”warning”] | Matches any E element whose “foo” attribute value is exactly equal to “warning” | Attribute selector |
| E[foo~=”warning”] | Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning” |
Attribute selector |
| E[lang|=”en”] | Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. | Attribute selector |
| DIV.warning | The same as DIV[class~=”warning”] | Class selector |
| E#myid | Matches any E element ID equal to “myid”. | ID selector |
| E:first-child [1] | Matches element E when E is the first child of its parent | Pseudo-class |
| :first-line [1] | Applies style to the first formatted line of a paragraph | Pseudo-class |
| :first-letter [1] | May be used for “initial caps” and “drop caps”, which are common typographical effects | Pseudo-class |
| E:active E:hover E:focus |
Matches E during certain user actions | Dynamic pseudo-class |
| :before [2] :after [2] |
Can be used to insert generated content before or after an element’s content | Dynamic pseudo-class |
| E:link E:visited |
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) |
Link pseudo-class |
| E:lang(c) | Matches element of type E if it is in (human) language ‘c’ (the document language specifies how language is determined) | :lang() pseudo-class |
- Not currently supported by most browsers.
- Not supported by Internet Explorer 6.