Categories
In CSS, pseudo-classes are used to select elements based on their state or position in the document tree. They allow you to apply styles to elements that cannot be selected using simple element selectors. Pseudo-classes are denoted by a colon (:) followed by the name of the pseudo-class.
There are several types of pseudo-classes available in CSS. Let's go through each of them with examples:
1. :hover pseudo-class: The :hover pseudo-class selects an element when it is being hovered over by the mouse pointer.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:hover Pseudo-class Example</title>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">Hover over me</a>
</body>
</html>
In this example, the :hover pseudo-class is applied to the anchor (<a>) element. When you hover the mouse over the anchor, the text color will change to red.
2. :active pseudo-class: The :active pseudo-class selects an element when it is being activated or clicked by the user.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:active Pseudo-class Example</title>
<style>
button:active {
background-color: yellow;
}
</style>
</head>
<body>
<button>Click Me</button>
</body>
</html>
In this example, the :active pseudo-class is applied to the button element. When you click the button, its background color will change to yellow.
3. :focus pseudo-class: The :focus pseudo-class selects an element that currently has focus, such as an input field that you are currently typing in or a link that you are navigating using the keyboard.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:focus Pseudo-class Example</title>
<style>
input:focus {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="text" placeholder="Type here">
</body>
</html>
In this example, the :focus pseudo-class is applied to the input element. When you click on the input field to start typing, a blue border will appear around it.
4. :first-child pseudo-class: The :first-child pseudo-class selects an element that is the first child of its parent.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:first-child Pseudo-class Example</title>
<style>
li:first-child {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>This is bold.</li>
<li>This is not bold.</li>
<li>This is not bold either.</li>
</ul>
</body>
</html>
In this example, the :first-child pseudo-class is applied to the li elements inside a ul. The first li element will have a bold font weight.
5. :last-child pseudo-class: The :last-child pseudo-class selects an element that is the last child of its parent.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:last-child Pseudo-class Example</title>
<style>
p:last-child {
color: green;
}
</style>
</head>
<body>
<div>
<p>This is not green.</p>
<p>This is not green either.</p>
<p>This is green.</p>
</div>
</body>
</html>
In this example, the :last-child pseudo-class is applied to the p elements inside a div. The last p element will have a green color.
6. :nth-child() pseudo-class: The :nth-child() pseudo-class selects elements based on their position among their siblings. You can specify a formula inside the parentheses to target specific elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:nth-child() Pseudo-class Example</title>
<style>
li:nth-child(odd) {
background-color: lightgray;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>
In this example, the :nth-child(odd) pseudo-class is applied to the li elements inside a ul. It selects the odd-numbered li elements (1st, 3rd, 5th, etc.) and gives them a light gray background color.
7. :not() pseudo-class: The :not() pseudo-class allows you to select elements that do not match a specified selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>:not() Pseudo-class Example</title>
<style>
p:not(.special) {
color: gray;
}
</style>
</head>
<body>
<p>This is a regular paragraph.</p>
<p class="special">This is a special paragraph.</p>
<p>This is another regular paragraph.</p>
</body>
</html>
In this example, the :not(.special) pseudo-class is applied to the p elements. It selects all p elements except those with the class "special" and gives them a gray color.
These are some of the most commonly used pseudo-classes in CSS. Pseudo-classes are powerful tools that allow you to style elements based on their state or position, enhancing the interactivity and visual appeal of your webpages.