DEV Community

Samuel Lubliner
Samuel Lubliner

Posted on

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)