DEV Community

Cover image for Complete CSS Selector Cheat Sheet: A Hands-On Guide with images😍
Arafat
Arafat

Posted on

Complete CSS Selector Cheat Sheet: A Hands-On Guide with images😍

CSS selectors can seem challenging because they provide a wide range of options for selecting HTML elements to style, and it's essential to understand the various options available and how they work. In addition, selectors allow you to target specific elements, classes, ids, attributes, and even pseudo-elements, based on their structure and relationships with other elements in your HTML.


📒 Therefore, I've come up with the complete guide/crash course/cheat sheet, whatever you call it, of CSS selectors to make your life easier.


Basic Selectors

Name CSS Description Result
Universal Selector * Select all elements result
Type div Select elements of that type` result
Class .c Select elements with that class result
Id #i Select elements with that id result

Combination of selectors

Name CSS         Description Result
Descendant div a Select elements that are descendants of the first element result
Direct Child div > a Select elements that are direct children of the first element result
General Sibling div ~ a Select elements that are siblings of the first element and come after the first element result
Adjacent Sibling div + a Select elements that are siblings of the first element and come directly after the first element result
Or div, a Select elements that match any selector in the list result
And div.c Select elements that match all the selector combinations result

Attribute

Name CSS     Description Result
Has [a] Select elements that have that attribute result
Exact [a=”1”] Select elements that have that attribute with exactly that value result
Begins With [a^=”1”] Select elements that have that attribute which start with that value result
Ends With [a$=”1”] Select elements that have that attribute which end with that value result
Substring [a*=”1”] Select elements that have that attribute which contain that value anywhere result

Pseudo Element Selctor

Name CSS       Description Result
Before div::before Creates an empty element directly before the children of selected element result
After div::after Creates an empty element directly after the children of selected element result

Pseudo Class State

Name CSS       Description
Hover button:hover Select elements that are hovered by the mouse
Focus button:focus Select elements that are focused.
Required input:required Select inputs that are required
Checked input:checked Select checkboxes/radio buttons that are checked
Disabled input:disabled Select inputs that are disabled

Pseudo Class Position/Other

Name CSS Description Result
First Child a:first-child Select elements that are the first child inside a container result
Last Child a:last-child Select elements that are the last child inside a container result
Nth Child a:nth-child(2n) Select elements that are the nth child inside a container based on the formula result
Nth Last Child a:nth-last-child(3) Select elements that are the nth child inside a container based on the formula counting from the end result
Only Child a:only-child Select elements that are the only child inside a container result
First Of Type a:first-of-type Select elements that are the first of a type inside a container result
Last Of Type a:last-of-type Select elements that are the last of a type inside a container result
Nth Of Type a:nth-of-type(2n) Select elements that are the nth of a type inside a container based on the formula result
Nth Last Of Type a:nth-last-of-type(2) Select elements that are the nth of a type inside a container based on the formula counting from the end result
Only Of Type a:only-of-type Select elements that are the only of a type inside a container result
Not a:not(.c) Select all elements that do not match the selector inside the not selector result

Conclusion

I hope I explained all of these CSS selectors to you quickly. If there are any mistakes in the article or I've missed something, please mention them in the comment section.

Thanks for reading the article. I will see you all in my next article👨‍💻

Top comments (7)

Collapse
 
j471n profile image
Jatin Sharma

This is amazing.

Collapse
 
arafat4693 profile image
Arafat

Thanks man😊

Collapse
 
alonedatascientist profile image
alonedatascientist

Thank you! Great for quick ref.

Collapse
 
devsecbbs_dev profile image
DevSecBBS

does most of those selection also work for jQuery...

Collapse
 
arafat4693 profile image
Arafat

Sorry, I actually don't know that. However, you can play with them in jquery a bit to see If they actually work. Thanks.

Collapse
 
kcbishal2001 profile image
Bishal Kc

This complete CSS Selector cheat sheet is awesome

Collapse
 
gizelads profile image
Gizela Delgado Soto

Very useful!