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
Type	div	Select elements of that type`
Class	.c	Select elements with that class
Id	#i	Select elements with that id

Combination of selectors

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

Attribute

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

Pseudo Element Selctor

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

Pseudo Class State

Pseudo Class Position/Other

Name	CSS	Description	Result
First Child	a:first-child	Select elements that are the first child inside a container
Last Child	a:last-child	Select elements that are the last child inside a container
Nth Child	a:nth-child(2n)	Select elements that are the nth child inside a container based on the formula
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
Only Child	a:only-child	Select elements that are the only child inside a container
First Of Type	a:first-of-type	Select elements that are the first of a type inside a container
Last Of Type	a:last-of-type	Select elements that are the last of a type inside a container
Nth Of Type	a:nth-of-type(2n)	Select elements that are the nth of a type inside a container based on the formula
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
Only Of Type	a:only-of-type	Select elements that are the only of a type inside a container
Not	a:not(.c)	Select all elements that do not match the selector inside the not selector

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👨‍💻