DEV Community

Cover image for The Trick with CSS Selectors
Tina Huynh
Tina Huynh

Posted on • Updated on

The Trick with CSS Selectors

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.

parts of a CSS rule

Universial Selector

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

* {}
Enter fullscreen mode Exit fullscreen mode

Type selectors

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

p {}
Enter fullscreen mode Exit fullscreen mode

Class selectors

Selects all elements given the class attribute.

.classname {}
Enter fullscreen mode Exit fullscreen mode

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

.class1.class2 {}
Enter fullscreen mode Exit fullscreen mode

ID selectors

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

#id {}
Enter fullscreen mode Exit fullscreen mode

Attribute selectors

Selects all elements given a specific attribute.

[attribute] {}
[attribute=value] {}
[attribute~=value] {}
[attribute|=value] {}
[attribute^=value] {}
[attribute$=value] {}
[attribute*=value] {}
Enter fullscreen mode Exit fullscreen mode

Grouping selectors

Selectors all the matching nodes

div,
span {}
Enter fullscreen mode Exit fullscreen mode

Combinators

web.dev has a detailed explanation of complex selectors.

Descendant combinators

Selects nodes descendant of the first element

div span {}
Enter fullscreen mode Exit fullscreen mode

Child combinators

Selectors nodes that are the direct child of the first element

div > p {}
Enter fullscreen mode Exit fullscreen mode

General sibling combinators

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 {}
Enter fullscreen mode Exit fullscreen mode

Adjacent sibling combinators

Selects all the elements of the second selector given that immediately follows the first.

section + h2 {}
Enter fullscreen mode Exit fullscreen mode

Pseudo

Pseudo classes

Selects elements based on the state information.

input:checked {}
input:indeterminate {}
input:invalid {}
input:enabled {}
input:focus {}
Enter fullscreen mode Exit fullscreen mode

Pseudo elements

Selects entities that are not included in HTML

p::first-letter {}
p::first-line {}
p::before {}
p::after {}
Enter fullscreen mode Exit fullscreen mode

Happy coding!

Buy Me A Coffee

Top comments (12)

Collapse
 
oricis profile image
Moisés Alcocer

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!

Collapse
 
tmchuynh profile image
Tina Huynh

Great suggestion :) I will do my best to include more links in the future

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Oh that's a detailed guide

Thanks for sharing, tina

Collapse
 
tmchuynh profile image
Tina Huynh

Glad I could be of help to you

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

keep doing :)

Collapse
 
thefrenchieweb profile image
Guillaume Ferber

Thank you for this great article.
A correction, though about the adjacent sibling combinators.
The correct syntax is:

section + h2 {}
Enter fullscreen mode Exit fullscreen mode

Keep bring more articles like that!

Collapse
 
tmchuynh profile image
Tina Huynh

Oops! Thank you so much for catching that

Collapse
 
tmchuynh profile image
Tina Huynh

The trick is to understand the fundamentals. With fundamentals, it's always easier to broaden one's horizons.

Collapse
 
ressenzo profile image
Renan Cossenzo

this is the kind of content that is basic, but VERY useful. thanks and congrats!

Collapse
 
tmchuynh profile image
Tina Huynh

Thanks :) glad I could provide useful information

Collapse
 
dionarodrigues profile image
Diona Rodrigues

Great tips, but I would recommend removing 'Column combinator' as this article is for beginners and this selctor is not working yet.

Collapse
 
tmchuynh profile image
Tina Huynh

Great note - I will definitely remove it