The Trick with CSS Selectors
Tags: css, beginners, webdev
Published: 2022-03-21 15:57:14

> In CSS, selectors are patterns used to select the element(s) you want to style
> [w3schools](https://www.w3schools.com/cssref/css_selectors.asp)

If you would like more information on CSS building blocks, [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks) and [w3.org](https://www.w3.org/TR/CSS21/selector.html%23id-selectors) are great references.

![parts of a CSS rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stl6u24987micbr0rf15.png)
 
### [Universial Selector](https://css-tricks.com/almanac/selectors/u/universal/#:~:text=The%20Universal%20Selector%20is%20the,literally%20any%20of%20the%20others.)
Selects every element in the document. Optionally, it can be restricted to a specific parent element.
```
* {}
```
### [Type selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors)
Selects a HTML element directly, such as "section", "a", "code", etc.
```
p {}
```
### [Class selectors](https://www.khanacademy.org/computer-programming/css-the-class-selector/6091891456344064)
Selects all elements given the `class` attribute.

```
.classname {}
```
Optionally, can be used to select specific elements with multiple `class` attributes.
```
.class1.class2 {}
```
### [ID selectors](https://htmldog.com/guides/css/intermediate/classid/)
Selects one specific elements corresponding to the given `ID` in the document.
```
#id {}
```
### [Attribute selectors](https://www.geeksforgeeks.org/css-attribute-selector/#:~:text=The%20CSS%20Attribute%20Selector%20is,those%20elements%20with%20similar%20attributes.)
Selects all elements given a specific attribute.
```
[attribute] {}
[attribute=value] {}
[attribute~=value] {}
[attribute|=value] {}
[attribute^=value] {}
[attribute$=value] {}
[attribute*=value] {}
```
### Grouping selectors
Selectors all the matching nodes
```
div,
span {}
```
### [Combinators](https://www.w3schools.com/css/css_combinators.asp)
[web.dev](https://web.dev/learn/css/selectors/?utm_source=devtools#complex-selectors) has a detailed explanation of complex selectors.

#### [Descendant combinators](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator)
Selects nodes descendant of the first element
```
div span {}
```
#### [Child combinators](https://docs.w3cub.com/css/child_combinator)
Selectors nodes that are the direct child of the first element
````
div > p {}
```
#### [General sibling combinators](https://css-tricks.com/almanac/selectors/g/general-sibling/)
Selects all the elements of the second selector given that comes after the first element. The second element does **not** have to appear immediately after the first element.
```
div ~ a {}
```
#### [Adjacent sibling combinators](https://blog.kevinchisholm.com/css/combinators/general-sibling-vs-adjacent-sibling/)
Selects all the elements of the second selector given that *immediately* follows the first.
```
section + h2 {}
```

### Pseudo
#### [Pseudo classes](https://www.washington.edu/accesscomputing/webd2/student/unit3/module5/lesson3.html#:~:text=Overview,%2F*%20your%20style%20here%20*%2F%20%7D)
Selects elements based on the state information.
```
input:checked {}
input:indeterminate {}
input:invalid {}
input:enabled {}
input:focus {}
```
#### [Pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
Selects entities that are not included in HTML
```
p::first-letter {}
p::first-line {}
p::before {}
p::after {}
```

Happy coding!

<a href="https://www.buymeacoffee.com/tmchuynh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="20" width="40"></a>