CSS Pseudo-classes

For example, a pseudo-class can be used to:

• Style an element when a user mouses over it (:hover).
• Style visited and unvisited links differently (:visited, :link).
• Style an element when it gets focus (:focus).
• Style the first child of an element (:first-child).

The syntax of a pseudo-class is: selector:pseudo-class { property: value; }

:hover Pseudo-class

The :hover pseudo-class is used to select elements when you mouse over them.

button:hover {
  background-color: lightgreen;
}

:first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

p:first-child {
  color: blue;
}

:nth-child() Pseudo-class

The :nth-child(n) pseudo-class matches every element that is the nth child, regardless of type, of its parent. You can use numbers, keywords (even or odd), or formulas (e.g., 2n+1).

tr:nth-child(even) {
  background-color: #f2f2f2;
}