CSS-Psedo-class
Pseudo-class
- In CSS, pseudo-classes are used to select and style elements based on their state or relationship with other elements.
- Pseudo-classes are preceded by a colon : and are added to the end of a selector to target specific elements that meet a particular criteria.
Syntax:
selector: pseudo-class {
property: value;
}
Commonly used pseudo-classes in CSS:
:hover pseudo-class
- This pseudo-class selects an element when the user hovers their mouse pointer over it.
- It is commonly used to change the appearance of links or buttons when hovered.
Example:
<html>
<head>
<style>
body {
text-align: center;
}
h1:hover {
color: red;
}
h2:hover {
color: blue;
}
</style>
</head>
<body>
<h1>Hello world </h1>
<h2>This is an example of :hover pseudo class</h2>
</body>
</html>
Output:
:active pseudo-class
- This pseudo-class selects an element when it is actively clicked or interacted with.
- It is often used to change the appearance of buttons or links when they are clicked.
Example
<html>
<head>
<style>
body {
text-align: center;
}
a:active {
color: yellow;
}
h1,
h2,
h3 {
color: red;
;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>The :active pseudo-class</h2>
<h3>Click the following link to see the effect</h3>
<a href="#">Click the link</a>
</body>
</html>
Output: