/    /  CSS pseudo-classes

CSS pseudo-classes

 

The CSS pseudo-classes (starts with a colon (:)) allow you to style the dynamic states of an element such as hover, active, and focus state.

 

syntax :

 

selector:pseudo-class { property: value; }

 

Anchor Pseudo-classes:

 

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
 color: red;
}

/* visited link */
a:visited {
 color: green;
}

/* mouse over link */
a:hover {
 color: hotpink;
}

/* selected link */
a:active {
 color: blue;
}
</style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="https://www.i2tutorials.com/">This is a link</a></b></p>

</body>
</html>

 

OUTPUT:

 

CSS pseudo-classes

 

The :first-child Pseudo-class:

 

This class matches a specified element that is the first child element of another element.

 

<!DOCTYPE html>
<html>
<head>
<style>
h2:first-child {
 color: red;
}
</style>
</head>
<body>

<h2>Enter some text here.</h2>
<h2>This is some text.</h2>

</body>
</html>

 

OUTPUT:

 

CSS pseudo-classes

 

The :lang Pseudo-class:

 

This class allows construction selectors based on the different language settings for specific tags.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
 quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>


</body>
</html>

 

OUTPUT:

 

CSS pseudo-classes