What is CSS Pseudo-classes

A 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

selector:pseudo-class {
  property: value;
}


CSS Anchor Pseudo-classes

Let’s see the given example to understand how 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

This is a css link

 

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

 

Pin It on Pinterest

Shares
Share This