What is CSS Pseudo classes
A CSS pseudo class is applied, where we want to explain a particular state of an element.
For better understanding where we use “CSS Pseudo-classes” let us see some given examples:
- Define the style of an element when a user mouses over it
- or to style visited links differently
The CSS pseudo class begins with a colon (:).
CSS Pseudo classes Syntax
property: value;
}
CSS Anchor Pseudo classes
Let’s see the given example to understand how css anchor pseudo classes works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
.tut-out1 a:link{
color: red;
}
/* visited link */
.tut-out1 a:visited {
color: green;
}
/* mouse over link */
.tut-out1 a:hover {
color: hotpink;
}
/* selected link */
.tut-out1 a:active {
color: blue;
}
</style>
</head>
<body>
<div class="tut-out1">
<h3>Anchor Pseudo classes</h3>
<p><b><a href="https://www.netzole.com/contact/" target="_blank">This is a css link</a></b></p>
</div>
</body>
</html>
Output
Anchor Pseudo-classes
CSS – The :first-child Pseudo-class
The :first-child pseudo-class is applied where we want to add a special effect to an element that is the first sibling of some other collection of sibling elements.
Let’s see the given example to understand how first-child Pseudo-class works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.css-class p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<h3>CSS first-child Pseudo-class</h3>
<div class="css-class">
<p>This is a css first-child Pseudo-class</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>It is a long established fact that a reader will be distracted by the readable content </p>
</div>
<div class="css-class">
<p>There are many variations of passages of Lorem Ipsum available</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</div>
</body>
</html>
Output
CSS first-child Pseudo-class
This is a css first-child Pseudo-class
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
It is a long established fact that a reader will be distracted by the readable content
There are many variations of passages of Lorem Ipsum available
Contrary to popular belief, Lorem Ipsum is not simply random text.
The standard chunk of Lorem Ipsum used since the 1500s
The :last-child Pseudo-class
The :last-child pseudo-class is applied where we want to add a special effect to an element that is the last sibling of some other collection of sibling elements.
Let’s see the given example to understand how last-child Pseudo-class works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.css-class p:first-child {
color: lime;
background-color: orange;
padding: 5px;
}
</style>
</head>
<body>
<h3>CSS last-child Pseudo-class</h3>
<div class="css-class">
<p>This is a css last-child Pseudo-class</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>It is a long established fact that a reader will be distracted by the readable content </p>
</div>
<div class="css-class">
<p>There are many variations of passages of Lorem Ipsum available</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</div>
</body>
</html>
Output
CSS last-child Pseudo-class
This is a css last-child Pseudo-class
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
It is a long established fact that a reader will be distracted by the readable content
There are many variations of passages of Lorem Ipsum available
Contrary to popular belief, Lorem Ipsum is not simply random text.
The standard chunk of Lorem Ipsum used since the 1500s