Each HTML element within a page might go through different state 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 over 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 click over that link, we say the state of the element changed to “active” state because it’s about to function (usually open the URL that it is linked to)
Then 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.
Why they call it Pseudo-Class? Well if you think about it, each of these states somehow represents a class for an element!
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” state (or the element is no-longer in hover class). That’s why they call it Pseudo-Class which means “not quite a real class”.
This is the structure of how we can use a Pseudo-Class:
Selector:Pseodo-Class{
property:value;
}Note: in each example we might have been applied multiple styles to an element. This is something that we covered in Cascade section, so don’t worry if you don’t get it at the moment. Just focus on the portion of the CSS source code that relates to each topic.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
h1{
width: 250px;
}
h1:hover{
background-color: red;
border:double;
}
</style>
</head>
<body>
<h1>Mouse over Me</h1>
</body>
</html>There are multiple types of selector related to Pseudo-Classe. Some of them only work with special elements and some of them are general and can work with pretty much all HTML elements.
We start with those Pseudo-class types of selectors that work with <a> element.
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">/* when a link is not visited yet */
a:link {
color: gray;
}/* when a link visited */
a:visited {
color: pink;
}/* when the mouse cursor hovers over a link */
a:hover {
color: green;
}/* the moment we click on a link and before we release mouse button. */
a:active {
color: black;
}
</style>
</head>
<body>
<a href="#6">first link</a>
<a href="#7">second link</a>
<a href="#8">third link</a>
<a href="#9">fourth link</a>
<a href="#10">fifth link</a>
</body>
</html>-
: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).
<!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>-
: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).
<!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>-
: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 element is in “hover” state
or “hover” Pseudo-class).
<!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>-
: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 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 after that, format it using :hover selector.
Here’s the complete list of where each selector places when we want to format based on the state of the link element.
<style type="text/css">
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
</style>Another type of Pseudo-class selector is “: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:
<!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>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:
<!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.