Comprehensive CSS Selector Reference List
A selector is a pattern; it’s the part of a CSS rule that matches a set of elements in an HTML or XML document. The declarations that appear in the block that follows the selector are applied to all elements that match this pattern, unless they’re overridden by another rule in the cascade.A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.
A selector is a chain of one or more simple selectors separated by combinators. Combinators are: white space, ">", and "+". White space may appear between a combinator and the simple selectors around it.
The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.
One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.
| Selector | Example | Example description | CSS v |
|---|---|---|---|
| .class | .intro | Selects all elements with class="intro" | 1 |
| #id | #firstname | Selects the element with id="firstname" | 1 |
| * | * | Selects all elements | 2 |
| element | p | Selects all <p> elements | 1 |
| element,element | div,p | Selects all <div> elements and all <p> elements | 1 |
| element element | div p | Selects all <p> elements inside <div> elements | 1 |
| element>element | div>p | Selects all <p> elements where the parent is a <div> element | 2 |
| element+element | div+p | Selects all <p> elements that are placed immediately after <div> elements | 2 |
| [attribute] | [target] | Selects all elements with a target attribute | 2 |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" | 2 |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" | 2 |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" | 2 |
| :link | a:link | Selects all unvisited links | 1 |
| :visited | a:visited | Selects all visited links | 1 |
| :active | a:active | Selects the active link | 1 |
| :hover | a:hover | Selects links on mouse over | 1 |
| :focus | input:focus | Selects the input element which has focus | 2 |
| :first-letter | p:first-letter | Selects the first letter of every <p> element | 1 |
| :first-line | p:first-line | Selects the first line of every <p> element | 1 |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent | 2 |
| :before | p:before | Insert content before the content of every <p> element | 2 |
| :after | p:after | Insert content after every <p> element | 2 |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" | 2 |
| element1~element2 | p~ul | Selects every <ul> element that are preceded by a <p> element | 3 |
| [attribute^=value] | a[src^="https"] | Selects every <a> element whose src attribute value begins with "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Selects every <a> element whose src attribute value ends with ".pdf" | 3 |
| [attribute*=value] | a[src*="w3schools"] | Selects every <a> element whose src attribute value contains the substring "w3schools" | 3 |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent | 3 |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent | 3 |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent | 3 |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent | 3 |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child | 3 |
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent | 3 |
| :root | :root | Selects the document’s root element | 3 |
| :empty | p:empty | Selects every <p> element that has no children (including text nodes) | 3 |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | 3 |
| :enabled | input:enabled | Selects every enabled <input> element | 3 |
| :disabled | input:disabled | Selects every disabled <input> element | 3 |
| :checked | input:checked | Selects every checked <input> element | 3 |
| :not(selector) | :not(p) | Selects every element that is not a <p> element | 3 |
| ::selection | ::selection | Selects the portion of an element that is selected by a user | 3 |
w3.org selector
Share:
No comments:
Post a Comment