CSS Pseudo-classes

Common Pseudo-classes

:hover triggers when mouse hovers over element.

:active applies when element is being clicked.

:focus applies when element has keyboard focus.

:first-child and :last-child target position in parent.

:nth-child(n) selects elements by position formula.

/* Interactive states */
a:hover {
  color: red;
}

button:active {
  transform: scale(0.95);
}

input:focus {
  outline: 2px solid blue;
}

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

li:last-child {
  border-bottom: none;
}

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

li:nth-child(3n) {
  color: red; /* Every 3rd item */
}

/* Form states */
input:disabled {
  opacity: 0.5;
}

input:checked + label {
  font-weight: bold;
}