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

#css #webdev #beginners #tutorial

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
`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
`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
`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

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