CSS Pseudo Class Selector Tutorial

In this section, we will learn what the Pseudo Class Selector is and how to use it in CSS.

Pseudo Classes in CSS

Each HTML element within a page might go through different states during its lifetime (from the moment we load a webpage till the moment we close that page)

For example:

When a link (<a> element) is loaded in a page, it is in a link state. Which means a user did not click this link, yet.

If a mouse cursor hovers over the boundary of this <a> element, we say that the state of the link changed to “hover” state.

When a user clicks over that link, we say the state of the element changed to “active” state because it’s about to function (usually run the URL that it is linked to)

After that link opened, we say the state of the link is now changed to “visited” state.

Also, other elements like have states as well. For example, if a mouse cursor hovers over the boundary of a element, we say that the element is in “hover” state and this can happen for other elements as well.

So as you can see each element in a page can have different states when the page is loaded.

It turns out that we can format each element based on its state! For example, we can change the border color of a <p> element if it was in "hover" state (when a mouse cursor hovered over the boundary of that element)

In CSS, they call each of these states a “Pseudo-Class” and there’s a selector for each of these states that we can use in order to format an element when it is in the specific state that we want.

In CSS we know that an element can have “class” attribute with one or more values assigned to it. This is solid and from the moment we declare this class and its value, it won’t change unless we explicitly change it. But states or Pseudo-Classes of an element are not solid! They change based on the user’s actions. For example, as we mentioned before, if a mouse cursor goes over the boundary of an element, that element is in “hover” state (or somehow we can say that element is in the hover class) but the moment this cursor leaves the boundary, the state of the element is no longer “hover” (or the element is no-longer in hover class). That’s why they call it Pseudo-Class which means “not quite a real class”.

CSS Pseudo Class Syntax:

This is the structure of how we can use a Pseudo-Class:

Selector:Pseudo-Class{
property:value;
}

The pseudo-class names start with a colon : mark. So first, we start with the target element/s by setting the selector and after that, we add the target pseudo-class to it so then the style will only apply when the target element is in the specified state related to the pseudo-class.

For example, the pseudo-class of the hover state is called :hover. So if we want to change the background color of a element for example to red when it is in the hover state, then we can go like this:

p:hover{
background-color: red;
}

Here, the selector is set to p which means, target the entire elements in a page and then the pseudo-class :hover is applied to this selector. This means changes the background-color of any element in a page that is in hover state.

Note: the applied style stays on the target element for as long as the state of that element is not changed! But the moment the state is changed, the style will change as well (it will go back to what it was before entering the specified state)!

List of Pseudo Classes in CSS:

There are multiple pseudo classes supported in CSS. Some of them we will cover in this section (which you can see them in the list below) and the rest are covered in later sections.

:active
:focus
:hover
:link
:root
:visited

CSS Pseudo Class: link

We use this type of pseudo-class selector to format all those links that are not visited yet, also the mouse cursor is not over them. (Basically, these links are in “link” state or “link” Pseudo-class)

Example: using link pseudo class in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
a:link {
color: gray;
}
</style>
</head>
<body>
<a href="#1">first link</a>
</body>
</html>

CSS Pseudo Class: visited

We use this type of pseudo-class selector to format all those links that a user already visited them or clicked them (Basically, these links are in “visited” state or “visited” Pseudo-class)

Example: using visited pseudo class in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
a:visited {
color: pink;
}
</style>
</head>
<body>
<a href="#2">first link</a>
</body>
</html>

CSS Pseudo Class: hover

This type of Pseudo-class selector is general one and it's not specifically designed to work with <a> element only! We use this selector when we want to format an element that has mouse cursor hover over its boundary. (Basically, the element is in "hover" state or "hover" Pseudo-class)

Example: using hover pseudo class in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
a:hover {
color: green;
}
</style>
</head>
<body>
<a href="#3">first link</a>
</body>
</html>

CSS Pseudo Class: active

When a user clicks on a link, what is happening is that the user press down a mouse button and release it. The moment between mouse button down and before releasing it, is called “active” state. It won’t take more than a few millisecond but we can format a link in that state as well using :active pseudo-class selector. (Basically, the element is in “active” state or “active” Pseudo-class).

Note: by default, in active sate the color of a link is “red”.

Example: using active pseudo class in CSS

when a user clicks on a link, what is happening is that the user
press down a mouse button and release it. The moment between mouse
button down and before releasing it, is called “active” state. It won’t
take more than a few millisecond but we can format a link in that state
as well using :active pseudo-class selector. (Basically, the element is
in “active” state or “active” Pseudo-class).

Note: by default, in active sate the color of a link is “red”.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
a:active {
color: black;
}
</style>
</head>
<body>
<a href="#4">first link</a>
</body>
</html>

Note: the order in which you declare Pseudo-class type of selectors for link type (<a> element) is important.

For example, if you want to format <a> element when a mouse cursor hovered over its boundary and you want to format that link element when a user visited the link, you should first format the link using :visited selector and after that, format it using :hover selector.

Here’s the complete list according to their order:

<style type="text/css">
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
</style>

CSS Pseudo Class: focus

Consider a text-box element; when a user clicks on the text-box in order to enter a value, the state of that text-box is in “focus”. So now we can use :focus selector when we want to format an element that is in focus state.

Example: using focus pseudo class in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
.username:focus{
background:yellow;
}
</style>
</head>
<body>
<label for="username">Username</label><input type="text" name="username" class="username" id="username">
</body>
</html>

CSS Pseudo Class: root

There’s another special pseudo class called ‘:root’: This is special because it only works on <html> tag.

When we want to format <html> element (which also called the root element) we can use this pseudo-class. It is exactly the same as if we used type-selector html.

Example: using root pseudo class in CSS

<!DOCTYPE html>
<html>
<head>
   <title>CSS is fun :)</title>
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
      :root{
         font-size: 50px;
         
      }
      
     
  </style> 
</head>
   <body>
      <p>
         The font size of this paragraph is 50px; 
      </p>
   </body>
</html>
Same example using type-selector:
<!DOCTYPE html>
<html>
<head>
   <title>CSS is fun :)</title>
   
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
      html{
         font-size: 50px;
         
      }
      
     
  </style> 
</head>
   <body>
      <p>
         The font size of this paragraph is 50px; 
      </p>
   </body>
</html>

Both examples above have the same result.