CSS Pseudo-classes
Pseudo Classes and ElementsIn this lesson, we will learn about pseudo-classes and how to apply them in CSS.
What are CSS Pseudo-classes?
CSS Pseudo-classes are used to select and style elements based on their state or position within the document. Pseudo-classes are preceded by a colon (:) and allow you to apply styles based on various conditions or interactions, such as hovering over an element, clicking it, or its position in a list.
Here is the list of commonly used CSS Pseudo-classes.
- :hover
- :active
- :focus
- :visited
- :link
- :first-child
- :last-child
- :nth-child(n)
- :nth-of-type(n)
:hover
The :hover Pseudo-class is used to apply styles to an element when a user hovers their mouse pointer over it. It's ideal for creating interactive buttons and links.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover Example</title>
<!-- Internal CSS -->
<style>
a:hover {
text-decoration: none;
background-color: #37FF61;
}
input[type="button"]:hover {
background-color: #24A7F9;
border-color: #FF132F;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
<input type="button" value="Click">
</body>
</html>:active
The :active Pseudo-class is used to style an element when it's being activated that means when a user clicks on the element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :active Example</title>
<!-- Internal CSS -->
<style>
a:active {
text-decoration: none;
background-color: #37FF61;
}
input[type="button"]:active {
background-color: #24A7F9;
border-color: #FF132F;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
<input type="button" value="Click">
</body>
</html>:visited
The :visited Pseudo-class selects links that have been visited by the user. You can change the color of the visited links using the CSS color property.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :visited Example</title>
<!-- Internal CSS -->
<style>
a:visited {
color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
</body>
</html>:link
The :link Pseudo-class selects unvisited links. You can change the color of the unvisited links using the CSS color property.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :link Example</title>
<!-- Internal CSS -->
<style>
a:visited {
color: red;
}
a:link {
color: #2DAE11;
}
</style>
</head>
<body>
<a href="https://www.google.com" target="_blank">Google</a>
<a href="https://www.exampledemooo.com" target="_blank">Demo</a>
</body>
</html>:focus
The :focus Pseudo-class is used to style an element when it gains focus, typically through keyboard navigation or when a user clicks inside a form field.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :focus Example</title>
<!-- Internal CSS -->
<style>
input:focus {
outline: 1px solid red;
}
</style>
</head>
<body>
<input type="text">
<input type="button" value="Click">
</body>
</html>:first-child
The :first-child Pseudo-class select and style the first child element of its parent. It targets an element only if it's the first child among its siblings within the same parent container.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :first-child Example</title>
<!-- Internal CSS -->
<style>
ol li:first-child {
color: red;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<ol>
<li>Item 1</li> <!-- first child of its parent ol -->
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ol>
</body>
</html>:last-child
The :last-child Pseudo-class select and style the last child element of its parent. It targets an element only if it's the last child among its siblings within the same parent container.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :last-child Example</title>
<!-- Internal CSS -->
<style>
ol li:last-child {
color: darkviolet;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li> <!-- last child of its parent ol -->
</ol>
</body>
</html>:nth-child(n)
The :nth-child(n) Pseudo-class selects elements based on their index number within a parent element. You can use n to target specific index number. The index number of the first child element inside a parent element start from 1. You can also target the odd and even index number using words like even or odd.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :nth-child(n) Example</title>
<!-- Internal CSS -->
<style>
ol li:nth-child(even) {
color: orange;
font-weight: bold;
}
ol li:nth-child(odd) {
color: red;
font-weight: bold;
}
div p:nth-child(2) {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<ol> <!-- index number of ol is 1 because it is the 1st child of div -->
<li>One</li> <!-- index number of 1st li is 1 because it is the 1st child of ol-->
<li>Two</li> <!-- index number of 2nd li is 2 because it is the 2nd child of ol-->
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ol>
<p>This is a sample text 1.</p> <!-- index number of 1st paragraph is 2 because it is the 2nd child of div -->
<p>This is a sample text 2.</p> <!-- index number of 2nd paragraph is 3 because it is the 3nd child of div -->
<p>This is a sample text 3.</p>
<p>This is a sample text 4.</p>
<p>This is a sample text 5.</p>
</div>
</body>
</html>:nth-of-type(n)
The :nth-of-type(n) Pseudo-class selects elements based on their index number that are the nth child of their parent element of a specific type. You can also target the odd and even index number using words like even or odd.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :nth-of-type(n) Example</title>
<!-- Internal CSS -->
<style>
.list1 li:nth-of-type(2) {
color: orange;
font-weight: bold;
}
.list2 li:nth-of-type(odd) {
color: red;
font-weight: bold;
}
div p:nth-of-type(3) {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<div>
<p>This is a sample text 1.</p>
<p>This is a sample text 2.</p>
<ol class="list1">
<li>One</li>
<li>Two</li> <!-- index number of 2nd li is 2 because it is 2nd li of list1 -->
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ol>
<ol class="list2">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li> <!-- index number of 5th li is 5 because it is 5th li of list2 -->
<li>Six</li>
</ol>
<p>This is a sample text 3.</p> <!-- index number of 3rd paragraph is 3 because it is the 3rd paragraph of div -->
<p>This is a sample text 4.</p>
<p>This is a sample text 5.</p>
</div>
</body>
</html>