DEV Community

Cover image for Pseudo-Classes & Elements
vayola pradeep
vayola pradeep

Posted on

Pseudo-Classes & Elements

what is Pseudo-Classes & Elements ?

Pseudo-classes allow you to apply styles to an element based on its state, its interaction with the user, or its position in the document. Single colon is the syntax for pseudo classes.

CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements].

4 link related pseudo class selectors

-link
-visited
-hover
-active

Image description

:link

Adds style to an unvisited hyperlinks.

a:link {
color: #FF0066;
}
Enter fullscreen mode Exit fullscreen mode

:visited

Styles for links that have already been visited.

a:visited {
color: #FF0066;
}

Enter fullscreen mode Exit fullscreen mode

:active

Adds style to an activated link.

a:active {
color: #FF0066;
}

Enter fullscreen mode Exit fullscreen mode

:hover

Adds style to an element when you mouse over it.

a:hover {
color: #FF0066;
}

Enter fullscreen mode Exit fullscreen mode

In general terms, a pseudo-class is sort of a phantom state or a specific characteristic of an element that we can target with CSS. Pseudo-classes allow you to apply styles to an element based on its state, its interaction with the user, or its position in the document. Single colon is the syntax for pseudo classes.

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Hello ! Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
vayolapradeep profile image
vayola pradeep

Thank you. I didnt know about that