❮❮ PREV NEXT ❯❯

CSS - Pseudo Class Selectors

You might have seen sometimes that by moving the mouse curser over a text changes the color of the text or does something else(Well! If you haven't seen, no worries, we will explain here). It can be achieved using the Pseudo Class Selectors of CSS.

What is Pseudo Class Selector?

Pseudo Class Selectors provides a way to apply styles to HTML elements based on their position or state.

Let us see how can we use Pseudo Class Selectors in action.

Mouse hover with Pseudo Class Selectors

On moving the mouse curser over an HTML element, we can change its color or increase its font size.

And the interesting fact is we don't need java script for that.

There is something called :hover in Pseudo Class Selectors that helps us achieve the same.

Let us look at the below example, where we would be changing the color of the paragraph on mouse hover.

Example :

<html>
<head>
	<style>
		p:hover {
  			color: red;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you look at the above output. When you take the mouse curser on the text of the <p> element,

<p>
	This is the first paragraph.
</p>

The color changes to red.

This is because we have added the Pseudo Class Selectors, :hover for the <p> element.

<style>
	p:hover {
		color: red;
	}
</style>

Note : We have explained :hover with <p> element. However, it can be used with any other elements like <div> or <span>.

Active Pseudo Class Selectors

Pseudo Class Selectors :active is used to apply styles to an HTML element when we click on the HTML element.

Example :

<html>
<head>
	<style>
		p:active {
  			color: red;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, if you see the above output. On clicking on the contents of the <p> element, i.e. This is the first paragraph., the color of the text changes to red.

This is because we have used :active Pseudo Class Selector with the <p> element.

<style>
	p:active {
		color: red;
	}
</style>

Focus Pseudo Class Selectors

Say, there is a textbox and you want to change the color of the textbox when someone selects the textbox.

And Pseudo Class Selectors :focus comes handy in such scenario.

Let us see it with the below example.

Example :

<html>
<head>
	<style>
		input:focus {
  			background-color: red;
  		}
	</style>	
</head>
	
<body>
	<span>Enter anything :</span>
	<input type="text" placeholder="Click here">
</body>
</html>

Output :

So, in the above example, we have defined a textbox with <input> element.

<input type="text" placeholder="Click here">

Now, when we click on the textbox, its color changes to red. And that is because of the :focus Pseudo Class Selector.

We have associated the <input> element with the :focus Pseudo Class Selector in the CSS properties.

<style>
	input:focus {
		background-color: red;
	}
</style>

And the color of the textbox(With <input> element) changes to red.

Visited Pseudo Class Selectors

Often you have seen that when you click on an hyperlink(i.e. The link with <a> tag), its color changes. This is something that can be done with :visited Pseudo Class Selectors.

Example :

<html>
<head>
	<style>
        a:visited{
            color: red;
        }
	</style>	
</head>
	
<body>
    <a href="#"> Click here and the color changes </a>
</body>
</html>

Output :

So, if you look at the above output, the color of the hyperlink(i.e. The link with <a> tag) changes to color red when clicked.

<a href="#"> Click here and the color changes </a>

This is because of the :visited Pseudo Class Selector that we have linked with the <a> tag.

<style>
	a:visited{
		color: red;
	}
</style>

In other words, :visited Pseudo Class Selector says to change the color to red once the link is already visited.

First-child Pseudo Class Selectors

To understand :first-child Pseudo Class Selector, we would directly jump into the below example.

Example :

<html>
<head>
	<style>
		p:first-child {
  			color: red;
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first child of body element.
	</p>
	<p> 
		This is not the first child.
	</p>
	<span>
		<p> 
			This is the first child of body element.
		</p>
	</span>
</body>
</html>

Output :

So, the :first-child Pseudo Class Selector says, select that <p> element who is the first child of any other element.

<style>
	p:first-child {
		color: red;
	}
</style>

In the above example, the first <p> element is the first child of the <body> element.

<p>
	This is the first child of body element.
</p>

And the third <p> element is the first child of the <span> element.

<span>
	<p>
		This is the first child of body element.
	</p>
</span>

However, the second <p> element is not the first child of the <body> element and hence is not selected.

❮❮ PREV NEXT ❯❯