In CSS, a pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Pseudo-classes are used to style elements based on user interaction, such as hovering over an element, clicking on it, or targeting it based on its position in the document.
Pseudo-classes allow you to apply styles to elements based on their current state or context. For example, the :hover
pseudo-class is used to apply styles when an element is being hovered over by the mouse pointer, while the :first-child
pseudo-class selects an element that is the first child of its parent.
Example:
/* Changing the background color when hovering over a link */
a:hover {
background-color: lightblue;
}
/* Selecting the first child of a list item */
li:first-child {
font-weight: bold;
}