CSS Selectors Cheat Sheet (.pdf)
Selectors, as previously mentioned, indicate which HTML elements are being styled. It is important to fully understand how to use selectors and how they can be leveraged. The first step is to become familiar with the different types of selectors. We’ll start with the most common selectors: type, class, and ID selectors.
| Selector | Example | Example description |
|---|---|---|
| .class | .intro | Selects all elements with class=”intro” |
| #id | #firstname | Selects the element with id=”firstname” |
| * | * | Selects all elements |
| element | p | Selects all p elements |
| element,element | div,p | Selects all elements and all elements |
| element element | div p | Selects all elements inside elements |
| element>element | div > p | Selects all elements where the parent is a element |
| element+element | div + p | Selects all elements that are placed immediately after elements |
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target=”_blank” |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word “flower” |
| [attribute|=language] | [lang|=en] | Selects all elements with a lang attribute value starting with “en” |
| :link | a:link | Selects all unvisited links |
| :visited | a:visited | Selects all visited links |
| :active | a:active | Selects the active link |
| :hover | a:hover | Selects links on mouseover |
| :focus | input:focus | Selects the input element which has focus |
| :first-letter | p:first-letter | Selects the first letter of every element |
| :first-line | p:first-line | Selects the first line of every element |
| :first-child | p:first-child | Selects every elements that is the first child of its parent |
| :before | p:before | Insert content before every element |
| :after | p:after | Insert content after every element |
| :lang(language) | p:lang(it) | Selects every element with a lang attribute value starting with “it” |
| element1~element2 | p~ul | Selects every ul element that are preceded by a p element |
| [attribute^=value] | a[src^=”https”] | Selects every element whose src attribute value begins with “https” |
| [attribute$=value] | a[src$=”.pdf”] | Selects every element whose src attribute value ends with “.pdf” |
| [attribute*=value] | a[src*=”w3schools”] | Selects every element whose src attribute value contains the substring “w3schools” |
| :first-of-type | p:first-of-type | Selects every p element that is the first p element of its parent |
| :last-of-type | p:last-of-type | Selects every p element that is the last p element of its parent |
| :only-of-type | p:only-of-type | Selects every p element that is the only p element of its parent |
| :only-child | p:only-child | Selects every p element that is the only child of its parent |
| :nth-child(n) | p:nth-child(2) | Selects every p element that is the second child of its parent |
| :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 |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every p element that is the second p element of its parent |
| :nth-last-of-type(n) | p:nth-last-oftype(2) | Selects every p element that is the second p element of its parent, counting from the last child |
| :last-child | p:last-child | Selects every p element that is the last child of its parent |
| :root | :root | Selects the document’s root element |
| :empty | p:empty | Selects every p element that has no children (including text nodes) |
Type Selectors
Type selectors target elements by their element type. For example, should we wish to tar-get all division elements, <div>, we would use a type selector of div. The following code shows a type selector for division elements as well as the corresponding HTML it selects.
Class Selectors
Class selectors allow us to select an element based on the element’s class attribute value. Class selectors are a little more specific than type selectors, as they select a par- ticular group of elements rather than all elements of one type.
Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements.
Within CSS, classes are denoted by a leading period, ., followed by the class attribute value. Here the class selector will select any element containing the class attribute value of awesome, including both division and paragraph elements.
ID Selectors
ID selectors are even more precise than class selectors, as they target only one unique element at a time. Just as class selectors use an element’s class attribute value as the selector, ID selectors use an element’s id attribute value as a selector.
Regardless of which type of element they appear on, id attribute values can only be used once per page. If used they should be reserved for significant elements.
Within CSS, ID selectors are denoted by a leading hash sign, #, followed by the id attri- bute value. Here the ID selector will only select the element containing the id attribute value of shayhowe.
Download CSS Selectors Cheat Sheet
