CSS Pseudo-class
Pseudo-class
The pseudo-class may be depicted as the keyword which can be mixed to any selector that specifies the elected element’s unique state. It can be included to a selector to insert the effect to an existing element regarding its state. Example, The :hover can be applied to add the unique effects to the element if the user points the cursor on the element.
The pseudo-class name isn’t case-sensitive.
Syntax:
The pseudo-class, along with the colon (:) is used. The syntax is as follows:
selector: pseudo-class
{
property: value;
}
Here, we are defining several pseudo-classes of CSS. We will explain a few most commonly applied and essential pseudo-classes. CSS pseudo-classes are explained in tabular form as below:
| Pseudo-class | Description |
| :active | It can be applied to include style to the active element. |
| :hover | It includes the unique effect to the element if a user points the cursor on the element. |
| :link | It inserts the style to an unvisited link. |
| :visited | It inserts the style to a visited link. |
| :lang | It can be applied to represent a language for use inside any specified element. |
| :focus | This class chooses an element that is focused via a user currently. |
| :first-child | This class includes a unique effect to the element, which are the first children of other elements. |
Let’s consider the pseudo-classes, which are discussed above, with some illustrations.
Pseudo-class- :hover
The :hover pseudo-class includes the style to the element if any user points the cursor on it. If we wish to create it useful, then it should be used after two pseudo-classes, i.e., “:visited” and “:link”.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align:center;
}
h1:hover
{
color: blue;
}
h2:hover
{
color: tomato;
}
</style>
</head>
<body>
<h1> Hello world </h1>
<h2> It is an illustration of pseudo class :hover </h2>
</body>
</html>
Output:
Pseudo-class- :active
This pseudo-class uses at the time of the element is activated or clicked. It chooses an activated element.
Let’s consider it along with a demonstration as follows:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
a:active
{
color: red;
}
h1, h2, h3
{
color: green;
}
</style>
</head>
<body>
<h1> Hello World! </h1>
<h2> pseudo-class :active </h2>
<h3> Click on the following link to examine the effect </h3>
<a href="#"> Click over the link</a>
</body>
</html>
Output:
Pseudo-class- :visited
It chooses a visited link and includes a unique style to them. It has possible values that can be the name of the color in any valid format.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
a:visited
{
color: lime;
}
</style>
</head>
<body>
<h1> Hello World! </h1>
<h2> pseudo-class :visited </h2>
<h3> Click on the following link to examine the effect </h3>
<a href="#"> Click over the link</a>
</body>
</html>
Output:
Pseudo-class- :lang
This class provides support in documents that need several languages. It permits us to portray the unique rules to distinct languages.
Example:
In the following example, we will describe p:lang(fr) that will choose the components having property lang=”fr”.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
p:lang(fr)
{
font-family: Verdana;
color: tomato;
}
</style>
</head>
<body>
<p> Without pseudo-class :lang </p>
<p lang="fr"> With pseudo-class :lang using the fr value </p>
</body>
</html>
Output:
Pseudo-class- :focus
It chooses the components that are focused over via a user currently. Generally, it is applied inside the input components of the triggers and forms if a user clicks over it.
Example:
<!DOCTYPE HTML>
<html>
<style>
form
{
text-align: center;
}
input:focus
{
border:5px solid lightgreen;
box-shadow:10px 10px 10px black;
color: blue;
width:300px;
}
</style>
<body>
<form>
<h1>Name: <input type="text" value="Enter your name"></h1>
</form>
</body>
</html>
Output:
Pseudo-class- :first-child
This pseudo-class is used to match the particular component, i.e., the first children of other components. It includes the unique effects to any corresponding component.
Note: We must declare the <!DOCTYPE> on the document’s top to create the pseudo-class, i.e., “:first-child” to implement within the IE8 and its other earlier version.
Let’s consider the following demonstration to understand it.
Example:
<!DOCTYPE HTML>
<html>
<head>
<style>
h1:first-child
{
text-indent: 200px;
color: red;
}
</style>
</head>
<body>
<div>
<h1> First heading inside the div. It will be sectioned, and its color will be red. </h1>
<h1> Second heading inside the div, and it will not be influenced.</h1>
</div>
</body>
</html>
Output:
The general tooltip hover
The tooltip describes extra information regarding something if the user points the cursor on the component. Let’s make the tooltip with the use of the pseudo-class “:hover”.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
h2
{
display: none;
background-color: purple;
color: white;
padding: 20px;
}
div
{
font-size: 40px;
}
div:hover h2
{
display: block;
}
</style>
</head>
<body>
<h1> Point your mouse on the below text to examine the effect </h1>
<div>Hello World!!
<h2>Welcome to this Page </h2>
</div>
</body>
</html>
Output:
CSS pseudo-classes and classes
The CSS classes may be connected with the pseudo-classes. The syntax is as follows:
Syntax:
selector.class: pseudo-class {
property: value; }
We can consider it with an example as follows:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
div.hello:hover
{
color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<h1> CSS pseudo-classes and classes </h1>
<h2> Point your cursor on the below text </h2>
<div class="hello"> Hello World!! </p>
</body>
</html>
Output:
