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
Attribute
Pseudo Element Selctor
| Name | CSS | Description | Result |
|---|---|---|---|
Before |
div::before |
Creates an empty element directly before the... |