Pseudo-classes are keywords added to selectors that define a special state of the selected elements. They are used to apply styles to elements based on their state or position without adding additional classes or IDs. Here’s a comprehensive guide to understanding and using CSS pseudo-classes effectively.
A pseudo-class starts with a colon (:) followed by the pseudo-class name. The syntax for using pseudo-classes is:
selector:pseudo-class {
property: value;
}
Description: Applies styles when the mouse pointer is over an element.
h1:hover {color: red;}
h2:hover {color: blue;}
Description: Applies styles when an element is activated, such as when a button is clicked.
a:active {color: yellow;}
Description: Styles links that have been visited by the user.
a:visited {color: red;}
Description: Applies styles when an element has focus, such as an input field.
input:focus {
border: 5px solid lightblue;
box-shadow: 10px 10px 10px black;
color: blue;
width: 300px;
}
Description: Selects the first child of its parent.
h1:first-child {
text-indent: 200px;
color: blue;
}
Description: Selects elements based on a numerical pattern. For example, every 2nd or 3rd child.
p:nth-child(2) {color: green;}
Description: Selects elements of a particular type based on a numerical pattern.
p:nth-of-type(2) {
color: orange;
}
Description: Selects elements of a particular type based on a numerical pattern, counting from the end.
p:nth-last-of-type(2) {color: purple;}
Description: Selects elements based on the language specified in the lang attribute
p:lang(fr) {font-family: Verdana; color: blue;}
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
h3 {
display: none;
background-color: red;
color: white;
padding: 20px;
}
div:hover h3 {
display: block;
}
</style>
</head>
<body>
<div>Move your cursor here
<h3>Welcome to the tooltip</h3>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<style>
form {
text-align: center;
}
input:focus {
border: 5px solid lightblue;
box-shadow: 10px 10px 10px black;
color: blue;
width: 300px;
}
</style>
</html>
<body>
<form>
<h1>Name: <input type="text" value="Enter your
name"></h1>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.hello:hover
color: red;
font-size: 40px;
</style>
</head>
<body>
<div>
<h2>Move your cursor to the below text</h2>
<div class="hello">Hello World</div>
</div>
</body>
</html>
• Enhancing Interactivity: Style elements based on user actions like hover or focus to improve user experience.
• Targeting Specific Elements: Apply styles to specific elements based on their position or state.
• Styling Form Elements: Customize the appearance of form elements based on their state (e.g., focus, checked).
• Adding Dynamic Effects: Combine with JavaScript for interactive effects.
• Improving Accessibility: Provide visual cues for users relying on assistive technologies.
• Limited Functionality: They have predefined behaviors and may not handle complex interactions.
• Browser Support: Some older browsers might not support all pseudo-classes.
• Static Selection: They do not update dynamically with DOM changes.
• Specificity Issues: They may conflict with other CSS rules due to specificity.
Understanding and utilizing CSS pseudo-classes allows for more interactive and visually appealing web designs, enhancing both user experience and accessibility.