# Pseudo-classes in CSS

●

●

Published 2022-12-03

This tutorial explains what is a Pseudo-class in CSS.

CSS pseudo-classes are used to add special effects to some selectors.

For instance, the :hover is used for adding special effects to an element when the user moves the cursor over the element.

These CSS pseudo-classes are immensely useful in a variety of situations.

Here we have the syntax of

selector: pseudo-class {  
  property: value;  
} 

Here are the CSS pseudo-classes we can use:

:focus -> adds special style to an element while the element has focus.
:active -> is used to add style to an active element.
:hover -> adds special effects to an element when the user moves the mouse pointer over the element.
:link -> adds special style to an unvisited link.
:visited -> adds style to a visited link.
:lang -> defines a language to use in a specified element.
:first-child -> adds special effects to an element, which is the first child of another element.

Here we have an example:

button:hover {
   color: blue;
}

When we pass through a button defined with <button> tag, the button will have the text in blue.

Another interesting tutorial is Pseudo-elements in CSS.