window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-63172957-1');
Sound
Awwwards
</html>
Created by potrace 1.16, written by Peter Selinger 2001-2019
Back to blog
HTML & CSS

CSS Selectors Cheat Sheet (.pdf)

Article index:

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

CSS Selectors Cheat Sheet

 



Back to blog

</html>
Wordpress Developer Loader, Web Developer Loader , Front End Developer Loader Jack is thinking