Pseudo-class

A keyword added to a CSS selector that specifies a special state of the selected element(s), such as :hover, :focus, or :first-child.

Overview

Pseudo-classes allow you to style elements based on their state or position in the document tree without adding extra classes to your HTML. They start with a colon (:) and provide a way to select elements that cannot be selected with simple selectors.

Example

css
/* Style on hover */
a:hover {
  color: blue;
  text-decoration: underline;
}

/* First child */
li:first-child {
  font-weight: bold;
}

/* Form input focus */
input:focus {
  border-color: blue;
  outline: none;
}

Key Points

  • Starts with single colon (:)
  • Represents element state or position
  • Common examples: :hover, :focus, :active, :visited
  • Structural: :first-child, :last-child, :nth-child()
  • Form states: :checked, :disabled, :valid

Learn More