We can add specific styles to existing elements in HTML using CSS Pseudo classes which select an element with a specific state such as (hover, visited, disabled, etc.)
NOTE − To separate CSS Pseudo Classes from Pseudo Elements, in CSS3, pseudo classes use single-colon notation.
Syntax
Following is the syntax for using CSS Pseudo classes on an element −
Selector:pseudo-class {
css-property: /*value*/;
}Following are all the available CSS Pseudo Classes −
| Sr.No | Pseudo-Class & Description |
|---|---|
| 1 | active It selects the active mentioned element |
| 2 | checked It selects every checked mentioned element |
| 3 | disabled It selects every disabled mentioned element |
| 4 | empty It selects every mentioned element that has no children |
| 5 | enabled It selects every enabled mentioned element |
| 6 | first-child It selects every mentioned element that is the first child of its parent |
| 7 | first-of-type It selects every element that is the first mentioned element of its parent |
| 8 | focus It selects the mentioned element that has focus |
| 9 | hover It selects mentioned elements on mouse over |
| 10 | in-range It selects mentioned elements with a value within a specified range |
| 11 | invalid It selects all mentioned elements with an invalid value |
| 12 | lang(language) It selects every mentioned element with a lang attribute value starting with "language" |
| 13 | last-child It selects every mentioned element that is the last child of its parent |
| 14 | last-of-type It selects every element that is the last mentioned element of its parent |
| 15 | link It selects all unvisited mentioned elements |
| 16 | not(selector) It selects every element that is not the mentioned element |
| 17 | nth-child(n) It selects every mentioned element that is the nth child of its parent |
| 18 | nth-last-child(n) It selects every mentioned element that is the nth child of its parent, counting from the last child |
| 19 | nth-last-oftype(n) It selects every mentioned element that is the nth mentioned element of its parent, counting from the last child |
| 20 | nth-of-type(n) It selects every mentioned element that is the nth mentioned element of its parent |
| 21 | only-of-type It selects every mentioned element that is the only mentioned element of its parent |
| 22 | only-child It selects every mentioned element that is the only child of its parent |
| 23 | optional It selects mentioned elements with no "required" attribute |
| 24 | out-of-range It selects mentioned elements with a value outside a specified range |
| 25 | read-only It selects mentioned elements with a "readonly" attribute specified |
| 26 | read-write It selects mentioned elements with no "readonly" attribute |
| 27 | required It selects mentioned elements with a "required" attribute specified |
| 28 | root It selects the document's root element |
| 29 | target It selects the current active mentioned element (clicked on a URL containing that anchor name) |
| 30 | valid It selects all mentioned elements with a valid value |
| 31 | visited It selects all visited mentioned elements |
Example
Let’s see an example of CSS Pseudo Class −
<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
color: #000;
padding:20px;
background-image: linear-gradient(135deg, grey 0%, white 100%);
text-align: center;
}
.anchor {
color: #FF8A00;
}
.anchor:last-child {
color: #03A9F4;
}
.anchor:visited {
color: #FEDC11;
}
.anchor:hover {
color: #C303C3;
}
.anchor:active {
color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>Output
This will produce the following output −
Example
Let’s see another example of CSS Pseudo Class −
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
.child:hover{
background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>Output
This will produce the following output −
When not hovering over div elements −
When hovering over div elements −
