CSS selectors

In CSS, templates of selectors are used to select element(s) which you want to style.
The "CSS" column shows in which CSS version the property is defined (CSS1, CSS2 or CSS3).
Selector | Example | Explanation | CSS |
---|---|---|---|
.class | .description | All elements with class = "description" | 1 |
#id | #yourname | Element with id = "yourname" | 1 |
* | * | All the elements | 2 |
element | p | All <p> elements | 1 |
element,element | div,p | All <div> and <p> elements | 1 |
element element | div p | All elements <p> inside <div> | 1 |
element>element | div>p | All elements <p> where <div> is parent element | 2 |
element+element | div+p | All <p> elements placed right after the element <div> | 2 |
[attribute] | [target] | All elements with attribute target | 2 |
[attribute=value] | [target=_blank] | All elements with attribute target with value "_blank" | 2 |
[attribute~=value] | [title=apple] | All elements with attribute title, which includes words separated by space, one of which is "apple" | 2 |
[attribute|=language] | [lang|=en] | All elements where the value of the attribute lang is "en", even if the value contains a dash (-) as in "en-us" | 2 |
:link | a:link | All links (|<a> elements with href) | 1 |
:visited | a:visited | All visited links | 1 |
:active | a:active | Active links | 1 |
:hover | a:hover | Links hovered over with mouse | 1 |
:focus | input:focus | Focused input elements | 2 |
:first-letter | p:first-letter | First letter of all the elements <p> | 1 |
:first-line | p:first-line | First line of all the elements <p> | 1 |
:first-child | p:first-child | All elements <p>, which are first-child to their parents | 2 |
:before | p:before | The content will be placed before each element <p> | 2 |
:after | p:after | The content will be placed after each element <p> | 2 |
:lang(language) | p:lang(it) | All elements <p> with the attribute lang, which include "it" | 2 |
[attribute^=value] | a[src^="https"] | All elements with the attribute src, with value which begins with "https" | 3 |
[attribute$=value] | a[src$=".pdf"] | All elements with the attribute src, with value which ends with ".pdf" | 3 |
[attribute*=value] | a[src*="xhtml"] | All elements with the attribute src, with value which contains "xhtml" | 3 |
:first-of-type | p:first-of-type | All p elements, which are first p elements of their parents | 3 |
:last-of-type | p:last-of-type | All p elements, which are last p elements of their parents | 3 |
:only-of-type | p:only-of-type | All p elements, which are the only p elements of their parents | 3 |
:only-child | p:only-child | All p elements, which are the only-child elements of their parents | 3 |
:nth-child(n) | p:nth-child(2) | All p elements, which are the second-child elements of their parents | 3 |
:nth-last-child(n) | p:nth-last-child(2) | All p elements, which are the second last child elements of their parents | 3 |
:nth-of-type(n) | p:nth-of-type(2) | All p elements , which are the second child of their parents | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | All p elements, which are the second last child of their parents | 3 |
:last-child | p:last-child | All p elements, which are the last child of their parents | 3 |
:root | :root | Root element of a document | 3 |
:empty | p:empty | All p elements, with no children (including text blocks) | 3 |
:target | #news:target | Current active element #news (click on the URL, contains the name of the anchor) | 3 |
:enabled | input:enabled | All enabled input elements | 3 |
:disabled | input:disabled | All disabled input elements | 3 |
:checked | input:checked | All checked boxes | 3 |
:not(selector) | :not(p) | All elements which are not p elements | 3 |
::selection | ::selection | Selection of part of the element which is selected by the user | 3 |