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)
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!
Great suggestion :) I will do my best to include more links in the future
Oh that's a detailed guide
Thanks for sharing, tina
Glad I could be of help to you
keep doing :)
Thank you for this great article.
A correction, though about the adjacent sibling combinators.
The correct syntax is:
Keep bring more articles like that!
Oops! Thank you so much for catching that
The trick is to understand the fundamentals. With fundamentals, it's always easier to broaden one's horizons.
this is the kind of content that is basic, but VERY useful. thanks and congrats!
Thanks :) glad I could provide useful information
Great tips, but I would recommend removing 'Column combinator' as this article is for beginners and this selctor is not working yet.
Great note - I will definitely remove it