Pseudo Classes in CSS

Pseudo-classes in CSS are keywords that are used to define a specific state or condition of an element. They are used to select and style elements based on various criteria that cannot be easily targeted with standard selectors.

Here are some commonly used pseudo-classes in CSS:

1. :hover - This pseudo-class is used to select and style an element when it is being hovered over by the mouse cursor.

Example:

a:hover {
  color: red;
}

1. :active - This pseudo-class selects and styles an element while it is being activated or clicked by the user.

Example:

button:active {
  background-color: blue;
}

1. :focus - This pseudo-class selects and styles an element that currently has keyboard focus.

Example:

input:focus {
  border: 2px solid green;
}

1. :visited - This pseudo-class selects and styles links that have been visited by the user.

Example:

a:visited {
  color: purple;
}

1. :first-child - This pseudo-class selects and styles the first child element of its parent.

Example:

li:first-child {
  font-weight: bold;
}

1. :nth-child(n) - This pseudo-class selects and styles the nth child element of its parent, where "n" can be a number, a keyword, or a formula.

Example:

tr:nth-child(odd) {
  background-color: lightgray;
}

These are just a few examples of pseudo-classes in CSS. There are many more available, each serving a specific purpose and providing additional flexibility when styling elements based on their state or position in the document structure.