CSS Pseudo Classes

CSS pseudo classes allow us to apply styles on an element based on its current state(like hover, active, focused, etc).

For example, If you hover over the below element, the background color of it changes from blue to orange. This is exactly what the pseudo classes do.

Hover Over Me!!!

The pseudo classes basically allows you to style the dynamic style of an element.

In this CSS tutorial, we will discuss the most commonly used pseudo classes along with examples. So, let’s get started:

Syntax of a Pseudo Class

A pseudo class in CSS starts with a colon(:) symbol.

selector:pseudo-class{
  /* CSS Styles */
}

Anchor Pseudo-classes

The anchor pseudo-classes are mostly used to style the links/hyperlinks. Using these pseudo-classes, we can style visited links differently from the unvisited links.

Some of the most commonly used anchor pseudo-classes are listed below:

• :link – Applies on an unvisited link
• :visited – Applies on a visited link
• :hover – Applies on hovering the link
• :active – Applies on clicking the link

Example:

a:link{
  color: blue;
}
a:visited{
  color: purple;
}
a:hover{
  color: red;
}
a:active{
  color: green;
}

The :first-child Pseudo-class

CSS :first-child pseudo-class always applies on the first child of the given type.

The pseudo-class in the example below, applies on the very first <p> element. Try it out:

Example:

p:first-child{
  background: #05ffb0;
  border: 1px solid;
  padding: 5px;
}

The :last-child Pseudo-class

CSS :last-child pseudo class applies on the last element of the given type.

For example, the :last-child pseudo-class in the below example applies on the last <p> element only. Try it out to see how it works:

Example:

p:last-child{
  background: #05ffb0;
  border: 1px solid;
  padding: 5px;
}

The :nth-child Pseudo-class

The :nth-child(N) pseudo-class allows us to select the nth element of a given type.

You can pass any number as an argument of :nth-child() to apply pseudo class on that element. For example, if you want to style the first element, use :nth-child(1), for the second child use :nth-child(2), and so on.

In the example below, the :nth-child pseudo-class applies on the 3rd <p> element.

Example:

p:nth-child(3){
  background: #05ffb0;
  border: 1px solid;
  padding: 5px;
}

The :nth-child pseudo-class can also accept expressions like 2n, 2n +1 and also keywords like even and odd. Such expression selects multiple elements of a given type.

• 2n, even – selects all even number elements
• 2n+1, odd – selects all odd number elements

The example below selects all odd number <p> elements:

Example:

p:nth-child(2n+1){
  background: #05ffb0;
  border: 1px solid;
  padding: 5px;
}

Pseudo Class with Element Id

The pseudo classes can also be combined with the element Id. Refer to the example below:

Example:

#myDiv:hover{
  background: yellow;
  color: black;
  width: 40%;
  padding: 25px 40px;
  font-size: 20px;
  border-radius: 5px;
}

Pseudo Classes with CSS Classes

Pseudo classes can also be combined with CSS classes.

Applying a pseudo class on a CSS class affects all the elements with the specified class name. Refer to the example below:

Example:

.myClass:hover{
  background: yellow;
  color: black;
}