Top 7 most used pseudo classes in CSS

Last update: 01 - 11 - 2023

What is a CSS pseudo class?

Pseudo-classes are states that modify the behavior or styles of an HTML element.

How to use a CSS pseudo-class

First we must have created the class with its respective selector, the pseudo classes will not do their job if the class that will contain it does not exist.

.assigned-class{
  /* Your styles */
}

Pseudo class syntax

To write a pseudo class in our CSS rules we must follow the following formula:

.class:pseudo-class{
  /* Pseudo class styles */
}

/* Note that the selector can be a HTML tag or an ID as well. */

📢IMPORTANT NOTE!

For the pseudo class to take effect there must be no separation between the colon ( : ) and the class.

What are pseudo-classes used for? 🤷

These can help us to highlight or modify visual behaviors of the HTML tags, either to disable some input of a form, to make incredible effects with the movement of the mouse over some element or to let a user know that he has already clicked on a link. It is not always necessary to use pseudo classes, it will depend on the creativity or the need of the view rendered on the screen.

most used CSS pseudo classes list

CSS hover pseudo class

The CSS hover is the most used to generate effects with the mouse. Its function is quite simple and determines the behavior of an element when the pointer passes over it. It is very common to use them in buttons to change color, in links to change the pointer style or to show pop-up information.

.random-class-1:hover{
  /* Styles to be applied when hovering the mouse over the element */
}

/* hover effect example */

.btn-post-example{
  display:block;
  background-color:#9CDCFE;
  color:#000;
  border-radius:7px;
  padding:1rem;
  text-align:center;
  text-decoration:none;
  transition:all300ms;
}

.btn-post-example:hover{
  background-color:#2b6df1;
  color:#fff;
}

/* Result */

Hover me

CSS active pseudo class

CSS active is widely used to give the user the feeling of security of having clicked on an element. It adds modernity to the styles of a website and is widely used in buttons; Apple is a good example of this.

.random-class-2:active{
  /* Styles to be applied while holding down the click on the element */
}

/* active example */

.btn-post-example-2{
  display:block;
  background-color:#9CDCFE;
  color:#000;
  border-radius:7px;
  padding:1rem;
  text-align:center;
  text-decoration:none;
  transition:all300ms;
}

.btn-post-example-2:active{
  background-color:#2b6df1;
  color:#fff;
}

/* Result */

Active me

CSS link pseudo class

Link is used for links that the user has not yet clicked on. The browser uses default styles but with CSS we have the ability to modify the styles and behavior of these links.

CSS visited pseudo class

This pseudo-class will be applied after the user has clicked on a link. It is a good way to indicate where the user has passed through a website. Let's see an example with both pseudo classes.

.random-class-3:link{
  /* Styles to be applied as long as the user has not clicked on the link */
}

.random-class-3:visited{
  /* Styles to be applied after the user has clicked on the link */
}

/* Example */

.link-post-example:link{
  background-color:#fff;
  color:#2b6df1;
  padding:2rem;
  text-align:center;
  text-decoration:none;
}

.link-post-example:visited{
  background-color:#738080;
  color:#551A8B;
}

/* Result */

Link Example

CSS first-child pseudo class

First-child will be applied to the first element found within a group of sibling elements; such as li tags grouped in an ul or paragraphs found within a div.

<divclass="p-container">
  <p>paragraph 1</p><-- Element to be affected
  <p>paragraph 2</p>
  <p>paragraph 3</p>
  <p>paragraph 4</p>
</div>

.p-container p:first-child{
  font-size:22px;
  color:blue;
}

Result. 👇

CSS nth-child pseudo class

Nth-child allows us to choose which of the sibling elements we want to affect as long as they are inside another element as in the previous example. Let's take it again.

<divclass="p-container">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  <p>paragraph 3</p>
  <p>paragraph 4</p>
</div>

/* The number in parentheses will indicate which element will be affected. */

.p-container p:nth-child(3){
  font-size:22px;
  color:blue;
}

Result. 👇

CSS root pseudo class

The root pseudo class is widely used when we want to use CSS variables instead of values to add styles to our HTML document. There is no need to create a class or id to use it since root refers to the HTML document by itself.

:root{
/* Variables */
  --mainColor:#14758B;
  --secondaryColor:#75D691;
}

Which pseudo classes do you use the most? Did you know how these worked? There are many more pseudo classes to see although not all of them are used in a single project. If you think this article missed one that you find essential let me know via my Instagram account.

Until I apply a comment section.😂