CSS 2 selector syntax
Blogs20122012-03-14
CSS 2 selector syntax:
For quick retrieving, I list basic CSS selecor syntax:
| Pattern | Meaning |
|---|---|
| * | Matches any element. |
| E | Matches any E element (i.e., an element of type E). |
| E F | Matches any F element that is a descendant of an E element. |
| E > F | Matches any F element that is a child of an element E. |
| E:first-child | Matches element E when E is the first child of its parent. |
| 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). |
| E:active
E:hover
E:focus | Matches E during certain user actions. |
| E:lang(c) | Matches element of type E if it is in (human) language c (the document language specifies how language is determined). |
| E + F | Matches any F element immediately preceded by a sibling element E. |
| E[foo] | Matches any E element with the “foo” attribute set (whatever the value). |
| E[foo=“warning”] | Matches any E element whose “foo” attribute value is exactly equal to “warning”. |
| 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”. |
| E[lang|=“en”] | Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”. |
| DIV.warning | Language specific. (In HTML, the same as DIV[class~=“warning”].) |
| E#myid | Matches any E element with ID equal to “myid”. |