We all know that CSS is an essential part of web development and it is typically one of the first technologies that every web developer learn along with HTML.
And of course, when you start learning CSS, selectors are one of the foundational concepts that you will encounter and delve into. Selectors serve as the backbone of CSS, allowing you to target specific HTML elements and define how they should be styled.
When I was first introduced to CSS selectors, I thought that there would be only a few. But as I started diving deep into it, there was no end. There are actually a lot of selectors in CSS and remembering all of them as a whole is quite difficult.
So, to make your life easier(and of course mine too), I have created this ultimate guide where I will provide you with a cheat sheet of all CSS selectors along with examples.
To make things simple and easy to remember, we generally categorize all the CSS selectors into the below five categories:
- Basic CSS selectors
- Combinator Selectors
- Pseudo-class Selectors
- Pseudo-elements Selector
- Attribute Selectors
Let’s see all the selectors of each group.
Note: I have also attached the complete CSS selectors cheat sheet PDF at the end of this article which you can download and save for your future reference.
1. Basic CSS Selectors Cheat Sheet
The basic group contains the most commonly used CSS selectors.
| Selector | Example | What It does |
| element | div | Selects all <div> elements |
| #id | #para | Selects only the <p> element with id=”para” |
| .class | .success | Selects all the <p> elements with class=”success” |
| * | * | Selects all the elements on the page |
| element, element | div, p | Selects all the <div> and <p> elements |
2. Combinator Selectors Cheat Sheet
The combinator selectors are those CSS selectors that allow you to select an element(or multiple elements) based on its relationship with the other elements. For example, selecting child or sibling elements.
| Selector | Example | What It Does |
| element element | div v | Selects all <p> elements that are inside the <div> element |
| element > element | div > p | Selects all <p> elements that are direct children of the <div> element |
| element + element | div + p | Selects the only <p> element that is placed just after the <div> element |
| element ~ element | div ~ p | Selects all the <p> elements that are placed after the <div> element |
3. Pseudo-class Selectors Cheat Sheet
The pseudo-class selectors are those CSS selectors that allow you to select the elements based on their state and position in the document tree.
For example, selecting all the visited links, selecting the first and last child elements of an element, and things like that.
| Selector | Example | What It Does |
| :link | a:link | Selects all unvisited links(<a>) |
| :visited | a:visited | Selects all visited links(<a>) |
| :active | a:active | Selects an active link. A link is considered active when it is being clicked. |
| :hover | a:hover | Selects a link on the mouse hover |
| :focus | input:focus | Selects the <input> element when it is in focus i.e. user starts typing something into the input |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent element |
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent element |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element within its parent element |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element within its parent element |
| :nth-child(n) | p:nth-child(3) | Selects every <p> element that is the third child of its parent element |
| :nth-last-child(n) | p:nth-last-child(3) | Selects every <p> element that is the third child of its parent but counting from the last |
| :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-of-type(2) | Selects every <p> element that is the second <p> element of its parent but counting from the last |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element within its parent element |
| :root | :root | Selects the root element of the document which is the <html> element in the case of an HTML document |
| :lang(language) | p:lang(hi) | Selects every p element with a lang attribute equal to “hi”(Hindi) |
| :target | #section1:target | Selects the current active anchor element having href=”section1″ attribute |
| :default | input:default | Selects those input elements which are selected by default. For example, all the radio buttons and checkboxes which are selected by default |
| :empty | p:empty | Selects every <p> element that has no child node(including text also) |
| :fullscreen | :fullscreen | Selects the element that is in full screen mode |
| :required | input:required | Selects every <input> element that has a “required” attribute |
| :optional | input:optional | Selects every <input> element that does not have the “required” attribute |
| :valid | input:valid | Selects every <input> element that has a valid value |
| :invalid | input:invalid | Selects every <input> element that does not have a valid value |
| :read-only | input:read-only | Selects every <input> element that has the “readonly” attribute |
| :read-write | input:read-write | Selects every <input> element that does not have the “readonly” attribute |
| :enabled | input:enabled | Selects every enabled input element |
| :disabled | input:disabled | Selects every disabled input element |
| :in-range | input:in-range | Selects every input element that has its value in the specified range |
| :out-of-range | input:out-of-range | Selects every input element that does not have its value in the specified range |
| :indeterminate | input:indeterminate | selects every input element that is in an indeterminate state |
| :checked | input:checked | Selects every checked input element |
4. Pseudo Element Selectors Cheat Sheet
The Pseudo-element selectors allow you to select and style the text content of an element. For example, selecting the first letter or first line of the text or even adding extra content before or after the text of the element.
| Selector | Example | What It Does |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| ::before | p::before | Inserts some content before the text of every <p> element |
| ::after | p::after | Inserts some content after the text of every <p> element |
| ::placeholder | input::placeholder | Selects the placeholder of every input |
| ::marker | ::marker | Selects the marker of every list item |
| ::selection | ::selection | Selects the portion of an element that is currently selected by the user |
5. CSS Attribute Selectors Cheat Sheet
The attribute selectors allow you to select the elements based on their attributes. For example, selecting all input elements that have type=”text” or type=”radio” attributes.
| Selector | Example | What It Does |
| [attribute] | a[target] | Selects all <a> elements that have the “target” attribute |
| [attribute=”value”] | a[target=”_blank”] | Selects all <a> elements that have the target=”_blank” attribute |
| [attribute~=”value”] | img[alt~=”round”] | Selects all <img> elements that have the word “round” in their “alt” attribute |
| [attribute|=”value”] | img[alt|=”round”] | Select all <img> elements where the alt attribute starts with the word “round”. The word should be a whole word. |
| [attribute^=”value”] | a[href^=”http”] | Selects every <a> element whose “href” attribute value begins with “http”. |
| [attribute$=”value”] | a[href$=”.com”] | selects all the <a> elements whose “href” attribute ends with a value “.com” |
| [attribute*=”value”] | img[alt*=”round”] | selects all the <p> elements that contain the value “round” in their alt attribute. The value needs not be a whole word and can be anywhere. |
The Complete CSS Selector Cheat Sheet in One Downloadable PDF and Image
Although dividing all the CSS selectors into multiple groups for our convenience is good still it is not always relevant. For example, you are preparing for an interview and you do not have much time to revise things, in that case, if you have the entire cheat sheet into one combined PDF or Image, that can be very helpful.
Keeping that in mind, I’ve created an image file as well as a PDF file that contains all the CSS selectors that we have discussed above.
CSS Selectors Cheat Sheet PDF Download
I’ve also created a PDF that contains all the selectors available in CSS with relevant examples and a short description.
Click on the Download button below to download the CSS selectors cheat sheet PDF.
I hope you find this article helpful. Thanks for reading!
