Example | ||||
h1 { color: green } h2 { color: green } h3 { color: green } |
Becomes => | h1, h2, h3 { color: green; } |
Element Selectors | ||||
Universal Selector | "*" | Matches any element | ||
Simple Element Selector | [Elem] | Matches specified Element name | ||
Descendent Selectors | [Elem1] S+ [Elem2] | Elem1 is the direct or indirect ancestor of Elem2 | ||
Child Selectors | [Elem1] ">" [Elem2] | Elem1 is the direct parent of Elem2 | ||
Adjacent Selectors | [Elem1] "+" [Elem2] | Elem1 and Elem2 share the same direct parent AND are next to each other in the document tree | ||
Attribute Selectors | ||||
Simple Attribute Selector | [Attr] or Elem[Attr] |
Matches all elements with the specified attribute or all 'Elem's with the specified attribute | ||
Attribute Value Selector | [Attr="value"] or Elem[Attr="value"] |
Matches all elements with the specified attribute/value or all 'Elem's with the specified attribute/value | ||
One-of-many Attribute Value Selector |
[Attr~="value"] or Elem[Attr~="value"] |
Allows a portion of an attribute value to be exactly matched where the portions are separated by spaces. | ||
Hyphen Attribute Value Selector |
[Attr|="value"] or Elem[Attr|="value"] |
The attribute value is a hyphen-separated list and begins with "value" | ||
Special HTML Selectors | ||||
Class Selector | .[Class Name] | Matches elements with CLASS attributes carrying a [Class Name] value | ||
ID Selector | #[ID Name] | Matches the element carrying the unique ID attribute value of [ID Name] | ||
Pseudo-Class Selectors | ||||
Link | A:link | Applies to an unvisited hyperlink | ||
Visited | A:visited | Applies to a visited hyperlink | ||
First-child | [Elem]:first-child | Applies to the first child/descendent of an element | ||
Active | [Elem]:active | The state during pointer activation ( eg: press and release of a mouse) | ||
Hover | [Elem]:hover | The state during pointer movement within the rendering region of an element | ||
Focus | [Elem]:focus | The state during which an element accepts keyboard input | ||
Lang | [Elem]:lang([Code]) | The selector content uses the specified language | ||
Pseudo-Element Selectors | ||||
Before | [Elem]:before | Addresses content that is generated before an element | ||
After | [Elem]:after | Addresses content that is generated after an element | ||
First-letter | [Elem]:first-letter | Indicates the first rendered letter/character for a block-level element | ||
First-line | [Elem]:first-line | Indicates the first rendered line on the output device of a block-level element |