Working with CSS Pseudo Classes

CSSWeb DevelopmentFront 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.NoPseudo-Class & Description
1active
It selects the active mentioned element
2checked
It selects every checked mentioned element
3disabled
It selects every disabled mentioned element
4empty
It selects every mentioned element that has no children
5enabled
It selects every enabled mentioned element
6first-child
It selects every mentioned element that is the first child of its parent
7first-of-type
It selects every element that is the first mentioned element of its parent
8focus
It selects the mentioned element that has focus
9hover
It selects mentioned elements on mouse over
10in-range
It selects mentioned elements with a value within a specified range
11invalid
It selects all mentioned elements with an invalid value
12lang(language)
It selects every mentioned element with a lang attribute value starting with "language"
13last-child
It selects every mentioned element that is the last child of its parent
14last-of-type
It selects every element that is the last mentioned element of its parent
15link
It selects all unvisited mentioned elements
16not(selector)
It selects every element that is not the mentioned element
17nth-child(n)
It selects every mentioned element that is the nth child of its parent
18nth-last-child(n)
It selects every mentioned element that is the nth child of its parent, counting from the last child
19nth-last-oftype(n)
It selects every mentioned element that is the nth mentioned element of its parent, counting from the last child
20nth-of-type(n)
It selects every mentioned element that is the nth mentioned element of its parent
21only-of-type
It selects every mentioned element that is the only mentioned element of its parent
22only-child
It selects every mentioned element that is the only child of its parent
23optional
It selects mentioned elements with no "required" attribute
24out-of-range
It selects mentioned elements with a value outside a specified range
25read-only
It selects mentioned elements with a "readonly" attribute specified
26read-write
It selects mentioned elements with no "readonly" attribute
27required
It selects mentioned elements with a "required" attribute specified
28root
It selects the document's root element
29target
It selects the current active mentioned element (clicked on a URL containing that anchor name)
30valid
It selects all mentioned elements with a valid value
31visited
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>

Output

This will produce the following output −

When not hovering over div elements −

When hovering over div elements −

raja
Published on 07-Jan-2020 11:03:46
Advertisements