View video tutorial
CSS Pseudo-Class
CSS
A CSS pseudo-class is a keyword that is used to specify a special state of an element when combined with a CSS selector.
CSS pseudo-class
➔ A pseudo-class is a keyword used with a CSS selector to define a special state of an element.
➔ Pseudo-classes are specified by a single colon (:) followed by the pseudo-class name. (e.g. button:hover).
Common CSS Pseudo-classes.
Pseudo-classes can be divided into several categories based on their functionality.
- Pseudo-classes respond to user interaction.
:focus{}Styles an element when it is focused.:link{}/:visited{}Style links that have been visited or not visited.:hover{}Styles an element when the user's pointer hovers over it.:active{}Styles an element when the user activates or clicks it.
- Pseudo-classes based on their location in the document structure.
:first-child{}Styles an element that is the first child of its parent.:last-child{}Styles an element that is the last child of its parent.:nth-child(n){}Styles the nth child element of its parent (n can be a number, a formula 2n, 3n, etc., or a keyword odd, even).:only-child{}Styles an element that is the only child of its parent.
- Form Pseudo-classes.
:checked{}Styles a checked checkbox or radio button.disabled{}Styles an element that is disabled.:enabled{}Styles an element that is enabled.:valid{}/:invalid{}Styles form elements with valid or invalid input values.:required{}/:optional{}Styles form elements with or without required attributes.
Syntax
selector:pseudo-class-name {CSS properties;}
Syntax description.
| Value | Description |
|---|---|
| selector | Specifies any CSS selector. Such as div, a, input, etc. |
| :pseudo-class-name | Specifies any CSS pseudo-class. For example: :link, :visited, :hover, :active, :focus, :first-child, :lang, etc. |
| CSS properties | Specifies any CSS property enclosed in {}, such as {color: #FF0000;background-color: blue;} |
button:hover {
background-color: lightgray;
}
div:hover {
background-color: blue;
color: #fff;
}
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>CSS pseudo-class example</title>
<style>
a:link {
color: green;
}
a:visited {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: magenta;
}
</style>
</head>
<body>
<h3>CSS pseudo-class example</h3>
<p><a href="/css/" target="_blank">Check the link after visiting.</a></p>
<p><b>Note:</b> Maintain the order a:link, a:visited, a:hover, a:active to be effective..</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
CSS pseudo-class :hover
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>CSS pseudo-class example</title>
<style>
img {
display: none;
padding: 20px;
}
div .hibiscus:hover img {
display: block;
}
div .rose:hover img {
display: block;
}
div .gardenia:hover img {
display: block;
}
div .blackberry:hover img {
display: block;
}
section {
border: 1px solid #cdcdcd;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<h3>CSS pseudo-class example</h3>
<div>
<section class="hibiscus">Hibiscus
<img src="resources/images/flowers-hibiscus-t.png">
</section>
<section class="rose">Rose
<img src="resources/images/flowers-rose-t.png">
</section>
<section class="gardenia">Gardenia
<img src="resources/images/flowers-gardenia-t.png">
</section>
<section class="blackberry">BlackBerry
<img src="resources/images/fruits-blackberry-t.png">
</section>
</div>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.