May 05, 2021 CSS Reference Manual
The CSS selector is used to select the pattern of the style of the element you want.
The "CSS" column represents the property definition in the CSS version (CSS1, CSS2, or CSS3).
| Selector | Example | Example description | Css |
|---|---|---|---|
| . class | .intro | Select all the elements of class-"intro" | 1 |
| # Id | #firstname | Select all the elements of id"firstname" | 1 |
| * | * | Select all elements | 2 |
| element | p | Select all of the elements | 1 |
| element,element | div,p | Select all the elements and the elements | 1 |
| element element | div p | Select all the elements within the element | 1 |
| element > element | div>p | Select all parents to be the slt;div;element of the element | 2 |
| element + element | div+p | Select all the elements immediately after the .lt;div> | 2 |
| [ attribute ] | [target] | Select all elements with the target property | 2 |
| [ attribute = value ] | [target=-blank] | Select all the elements that use target"-blank" | 2 |
| [ attribute ~= value ] | [title~=flower] | Select the title property to contain all elements of the word "flower" | 2 |
| [ attribute |= language ] | [lang|=en] | Select a lang property for all elements that begin with en | 2 |
| :link | a:link | Select all unresoled links | 1 |
| :visited | a:visited | Select all the links you've visited | 1 |
| :active | a:active | Select the active link | 1 |
| :hover | a:hover | Select the mouse over the link | 1 |
| :focus | input:focus | Select the input element with focus | 2 |
| :first-letter | p:first-letter | Select the first letter of each of the elements | 1 |
| :first-line | p:first-line | Select the first line of each of the elements | 1 |
| :first-child | p:first-child | Specifies the style only if the element is the first child of its parent. | 2 |
| :before | p:before | Insert content before each of the elements | 2 |
| :after | p:after | Insert the content after each of the elements | 2 |
| :lang( language ) | p:lang(it) | Select the starting value of a lang property, all the elements of "it" | 2 |
| element1 ~ element2 | p~ul | Select each of the elements after the element | 3 |
| [ attribute ^= value ] | a[src^="https"] | Select the element that begins with "https" for the value of each src property | 3 |
| [ attribute $= value ] | a[src$=".pdf"] | Select the value of each src property to end .pdf "Src" | 3 |
| [ attribute *= value ] | a[src*="W3Cschool"] | Selecting the value of each src property contains elements of the substring "W3Cschool" | 3 |
| :first-of-type | p:first-of-type | Selecting each of the elements is the first of its parents | 3 |
| :last-of-type | p:last-of-type | Select each of the elementes, which is the last of its parents, and the element | 3 |
| :only-of-type | p:only-of-type | Select each of the elements that is the only one of its parents | 3 |
| :only-child | p:only-child | Select each of the elementes to be the only child element of its parent | 3 |
| :nth-child( n ) | p:nth-child(2) | Selecting each element is the second child element of its parent | 3 |
| :nth-last-child( n ) | p:nth-last-child(2) | Each element selected is the second child element of its parent, counting from the last child | 3 |
| :nth-of-type( n ) | p:nth-of-type(2) | Selecting each of the elements is the second element of its parent | 3 |
| :nth-last-of-type( n ) | p:nth-last-of-type(2) | Selecting each of the elements is the second and lt;p> element of its parent, counting from the last child | 3 |
| :last-child | p:last-child | Selecting each element is the last child of its parent. | 3 |
| :root | :root | Select the root element of the document | 3 |
| :empty | p:empty | Select each element (including text nodes) that does not have any children | 3 |
| :target | #news:target | Select the currently #news element (the click URL that contains the anchor name) | 3 |
| :enabled | input:enabled | Select each enabled input element | 3 |
| :disabled | input:disabled | Select each disabled input element | 3 |
| :checked | input:checked | Select each selected input element | 3 |
| :not( selector ) | :not(p) | Select each element that is not a .lt;p.gt. element | 3 |
| ::selection | ::selection | The part of the matching element that is selected by the user or is highlighted | 3 |
| :out-of-range | :out-of-range | The matching value is outside the specified interval | 3 |
| :in-range | :in-range | The element of the matching value that is within the specified interval | 3 |
| :read-write | :read-write | Used to match readable and writeable elements | 3 |
| :read-only | :read-only | Used to match the elements that set the readonly (read-only) property | 3 |
| :optional | :optional | Used to match optional input elements | 3 |
| :required | :required | Used to match elements that have the "required" property set | 3 |
| :valid | :valid | Used to match elements with input values that are legal | 3 |
| :invalid | :invalid | Used to match elements with input values that are illegal | 3 |