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 on 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 <p> have states as well. For example, if a mouse cursor hovers over the boundary of a <p> 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 <p> 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 <p> elements in a page and then the pseudo-class :hover is applied to this selector. This means changes the background-color of any <p> 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
See the Pen using link pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
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
See the Pen using visited pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
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
See the Pen using hover pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Class: active
When a user clicks on a link, what is happening is that the user press down a mouse button and releases it. The moment between mouse button down and before releasing it, is called “active” state. It won’t take more than a few milliseconds, 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 an active state, 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 releases it. The moment between mouse button down and before releasing it, is called “active” state. It won’t take more than a few milliseconds, 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 an active state, the color of a link is “red”.
Example:
See the Pen using active pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
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
See the Pen using focus pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
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 is 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
See the Pen using root pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Same example using type-selector:
See the Pen Same example using type-selector by Enjoy Tutorials (@enjoytutorials) on CodePen.
Both examples above have the same result.
