CSS Pseudo Classes

Pseudo class is used to define a special state of an element. It is added to the selector for adding an effect to the existing elements based on their states. For example, The “:hover” is used for adding special effects to an element when the user moves the cursor over the element.

A pseudo-class always starts with a colon (:) and the names of the pseudo-class are not case-sensitive.

Pseudo-classDescription
:activeused to add style to an active element.
:hoveradds special effects to an element when the user moves the mouse pointer over the element.
:linkadds style to the unvisited link.
:visitedadds style to a visited link.
:langused to define a language to use in a specified element.
:focusselects the element which is focused by the user currently.
:first-childadds special effects to an element, which is the first child of another element.
:last-childadds special effects to an element, which is the last child of another element.
:nth-childadds special effects to an element, which is the nth child of an element.
:nth-last-childadds special effects to an element, which is the nth child of an element but it will calculate that nth child from last.

:hover pseudo-class

This pseudo-class adds a special style to an element when the user moves the cursor over it. If we want to make it effective, it must be applied after the “:link” and “:visited” pseudo-classes.

Index.html
	
<body> 
	 <p>Paragraph 1</p>
</body>

Style.css
p:hover {
    color: #ccc;
}

:active pseudo-class

It applies when the elements are clicked or activated. It selects the activated element.

Index.html
	
<body> 
	 <p>Paragraph 1</p>
</body>

Style.css
p:hover {
    color: #ccc;
}
p:active{
	  color: yellow;
}

:visited pseudo-class

It selects the visited links and adds special styles to them. Its possible values can be any color name in a valid format.

Index.html
	
<body> 
	 <p>Paragraph 1</p>
</body>

Style.css
p:hover {
    color: #ccc;
}
p:visited{
	  color: red;
}

:lang pseudo-class

It is helpful in documents that require multiple languages. It allows us to define special rules for different languages.

Input:-

Index.html
	
<body> 
	 <p lang="fr">Paragraph 1</p>
	 <p>Paragraph 2</p>
</body>

Style.css
p:lang(fr){  
   font-family: Verdana;  
   color: blue;  
}  

Output:-


:focus pseudo-class

It selects the elements that are currently focused on by the user. It is generally used in input elements of the forms and triggers when the user clicks on it.

Index.html
	
<body> 
	 <p>Paragraph 1</p>
</body>

Style.css
p:hover {
    color: #ccc;
}
p:focus{
	  color: blue;
}

:first-child pseudo-class

This pseudo class matches a particular element, which is the first child of another element and adds a special effect to the corresponding element.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
</body>

Style.css
p:first-child {  
   background-color: #ccc;  
}  

Output:-


:last-child pseudo-class

This pseudo class matches a particular element, which is the last child of another element and adds a special effect to the corresponding element.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
</body>

Style.css
p:last-child {  
   background-color: #ccc;  
}  

Output:-


:nth-child pseudo-class

This pseudo class matches a particular element, which is the nth child of another element and we can control the child number which we want to change or give styling to. This number starts with 1 and maximum it can go to the count of elements it has.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
	 <p>Paragraph 3</p>
	 <p>Paragraph 4</p>
</body>

Style.css
p:nth-child(3) {  
   background-color: #ccc;  
}  

Output:-


:nth-last-child pseudo-class

This pseudo class matches a particular element, which is the last nth child of another element and we can control the child number which we want to change or give styling to. This number starts with 1 and maximum it can go to the count of elements it has.

Input:-

Index.html
	
<body> 
	 <p>Paragraph 1</p>
	 <p>Paragraph 2</p>
	 <p>Paragraph 3</p>
	 <p>Paragraph 4</p>
</body>

Style.css
p:nth-last-child(3) {  
   background-color: #ccc;  
}  

Output:-