CSS Selectors
CSS selectors are patterns used to select the elements you want to style.
The "CSS" column indicates the version of CSS where the property is defined (CSS1, CSS2, or CSS3).
| Selector | Example | Example Description | CSS | ||
|---|---|---|---|---|---|
| .class | .intro | Selects all elements with class="intro" | 1 | ||
| #id | #firstname | Selects all elements 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 the first <p> element that is 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 | =language]](../cssref/sel-attribute-value-lang.html) | [lang | =en] | Selects all elements with a lang attribute value equal to "en" or 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 | Specifies style for <p> elements that are the first child of their parent | 2 | ||
| :before | p:before | Inserts content before every <p> element | 2 | ||
| :after | p:after | Inserts content after every <p> element | 2 | ||
| :lang(language) | p:lang(it) | Selects all <p> elements with a lang attribute starting with "it" | 2 | ||
| element1~element2 | p~ul | Selects every ul element that is preceded by a p element | 3 | ||
| [attribute^=value] | a[src^="https"] | Selects every element where the src attribute value starts with "https" | 3 | ||
| [attribute$=value] | a[src$=".pdf"] | Selects every element where the src attribute value ends with ".pdf" | 3 | ||
| [attribute*=value] | a[src*="tutorialpro"] | Selects every element where the src attribute value contains the substring "tutorialpro" | 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 with 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 | Matches the portion of an element that is selected by a user | 3 | ||
| :out-of-range | :out-of-range | Matches input elements with a value outside the specified range | 3 | ||
| :in-range | :in-range | Matches input elements with a value within the specified range | 3 | ||
| :read-write | :read-write | Matches elements that are readable and writable | 3 | ||
| :read-only | :read-only | Matches elements with the "readonly" attribute | 3 | ||
| :optional | :optional | Matches optional input elements | 3 | ||
| :required | :required | Matches elements with the "required" attribute | 3 | ||
| :valid | :valid | Matches elements with a valid input value | 3 | ||
| :invalid | :invalid | Matches elements with an invalid input value | 3 |