The Trick with CSS Selectors

#css #beginners #webdev

In CSS, selectors are patterns used to select the element(s) you want to style
w3schools

If you would like more information on CSS building blocks, MDN Web Docs and w3.org are great references.

Universial Selector

Selects every element in the document. Optionally, it can be restricted to a specific parent element.

* {}

Type selectors

Selects a HTML element directly, such as "section", "a", "code", etc.

p {}

Class selectors

Selects all elements given the class attribute.

.classname {}

Optionally, can be used to select specific elements with multiple class attributes.

.class1.class2 {}

ID selectors

Selects one specific elements corresponding to the given ID in the document.

#id {}

Attribute selectors

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

web.dev has a detailed explanation of complex selectors.

Descendant combinators

Selects nodes descendant of the first element

div span {}

Child combinators

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>

Top comments (12)

Moisés Alcocer • Mar 23 '22

Interesting, I didn't know some of the inputs pseudoclasses.
Maybe some comments, or link to get more information about some selectors could improve your work, for example, concrete use casses / browser support of the input:indeterminate selector here: w3schools.com/cssref/sel_indetermi...
or Warning with the *Universial Selector**, some possible performance issues asociated when use it!