CSS Pseudo Classes

css

In CSS, a pseudo-class is a keyword that is added to a selector and specifies a special state of the selected element(s) . Pseudo-classes allow you to style elements based on their state, such as when they are hovered over, focused, or active.

Here are some common pseudo-classes that you might use in CSS:

  • :hover: applies a style to an element when the user hovers over it with the mouse.
  • :focus: applies a style to an element when it has focus (e.g., when it is selected or clicked on).
  • :active: applies a style to an element when it is being activated (e.g., when a button is being clicked).
  • :visited: applies a style to an element when it is linked to a visited page.
  • :link: applies a style to an element when it is linked to an unvisited page.
  • :first-child: applies a style to an element that is the first child of its parent element.
  • :last-child: applies a style to an element that is the last child of its parent element.

Here’s an example of how you might use a pseudo-class:

a:hover {
    color: red;
}

This would change the color of a link to red when the user hovers over it with the mouse.

You can also use multiple pseudo-classes in a single selector. For example:

a:link, a:visited {
    color: blue;
}

a:hover, a:active {
    color: red;
}