DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on

2

CSS Selectors

Selectors target HTML elements and apply styles based on their attributes, types, and relationships.

Universal selector:

*{
}
Enter fullscreen mode Exit fullscreen mode

Element:

element{
}
Enter fullscreen mode Exit fullscreen mode

Attribute:

#id {
}
Enter fullscreen mode Exit fullscreen mode
.class {
}
Enter fullscreen mode Exit fullscreen mode
element[attribute='value'] {
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-class:
Select and style elements based on their state
Pseudo-class attached to a selector

selector:pseudo-class {
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-classes include:
:hover
:active
:focus
:visited
:first-child
:last-child
:not
:enabled
:disabled

CSS Syntax and Selectors cheat sheet

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay