Working with CSS Pseudo Classes

CSS Web Development Front End Technology

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 −

Live Demo

<!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 −

Live Demo

<!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>