CSS Selectors
Selectors
A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.
Selectors may range from simple element names to rich contextual representations.
For future searchers, there is a way to escape without plugins, use the code below:
it is possible to disable liquid processing engine using the raw tag: will display
The following table summarizes the Selector syntax:
| Pattern | Meaning | Described in section |
|---|---|---|
| * | any element | Universal selector |
E |
an element of type E | Type selector |
E[foo] |
an E element with a “foo” attribute | Attribute selectors |
E[foo="bar"] |
an E element whose “foo” attribute value is exactly equal to “bar” | Attribute selectors |
E[foo~="bar"] |
an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar” | Attribute selectors |
E[foo^="bar"] |
an E element whose “foo” attribute value begins exactly with the string “bar” | Attribute selectors |
E[foo$="bar"] |
an E element whose “foo” attribute value ends exactly with the string “bar” | Attribute selectors |
E[foo*="bar"] |
an E element whose “foo” attribute value contains the substring “bar” | Attribute selectors |
E[foo|="en"] |
an E element whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en” | Attribute selectors |
E:root |
an E element, root of the document | Structural pseudo-classes |
E:nth-child(n) |
an E element, the n-th child of its parent | Structural pseudo-classes |
E:nth-last-child(n) |
an E element, the n-th child of its parent, counting from the last one | Structural pseudo-classes |
E:nth-of-type(n) |
an E element, the n-th sibling of its type | Structural pseudo-classes |
E:nth-last-of-type(n) |
an E element, the n-th sibling of its type, counting from the last one | Structural pseudo-classes |
E:first-child |
an E element, first child of its parent | Structural pseudo-classes |
E:last-child |
an E element, last child of its parent | Structural pseudo-classes |
E:first-of-type |
an E element, first sibling of its type | Structural pseudo-classes |
E:last-of-type |
an E element, last sibling of its type | Structural pseudo-classes |
E:only-child |
an E element, only child of its parent | Structural pseudo-classes |
E:only-of-type |
an E element, only sibling of its type | Structural pseudo-classes |
E:empty |
an E element that has no children (including text nodes) | Structural pseudo-classes |
E:linkE:visited |
an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) | The link pseudo-classes |
E:activeE:hover E:focus |
an E element during certain user actions | The user action pseudo-classes |
E:target |
an E element being the target of the referring URI | The target pseudo-class |
E:lang(fr) |
an element of type E in language “fr” (the document language specifies how language is determined) | The :lang() pseudo-class |
E:enabledE:disabled |
a user interface element E which is enabled or disabled | The UI element states pseudo-classes |
E:checked |
a user interface element E which is checked (for instance a radio-button or checkbox) | The UI element states pseudo-classes |
E::first-line |
the first formatted line of an E element | The ::first-line pseudo-element |
E::first-letter |
the first formatted letter of an E element | The ::first-letter pseudo-element |
E::before |
generated content before an E element | The ::before pseudo-element |
E::after |
generated content after an E element | The ::after pseudo-element |
E.warning |
an E element whose class is “warning” (the document language specifies how class is determined). | Class selectors |
E#myid |
an E element with ID equal to “myid”. | ID selectors |
E:not(s) |
an E element that does not match simple selector s | Negation pseudo-class |
E F |
an F element descendant of an E element | Descendant combinator |
E > F |
an F element child of an E element | Child combinator |
E + F |
an F element immediately preceded by an E element | Adjacent sibling combinator |
E ~ F |
an F element preceded by an E element | General sibling combinator |
The meaning of each selector is derived from the table above by prepending “matches” to the contents of each cell in the “Meaning” column.
Post written on August 19, 2015
Post written on 2015-08-19 00:00:00 -0700
Post written on 2015-08-19 00:00:00 -0700