Pseudo-class Selector

Element ki STATE ke basis pe style karta hai — hover, focus, checked.

User Action

:hover mouse upar. :focus keyboard focus.

Position

:first-child, :last-child, :nth-child(odd).

Form States

:checked, :disabled, :valid/:invalid.

pseudo-class.css

.btn:hover {
  background: #ea580c;
}

input:focus {
  outline: 2px solid #3b82f6;
}

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

.checkbox:checked + label {
  color: #10b981;
}

💡 Pro Tips

Classes jaisi specificity (0,1,0)
Zebra tables ke liye perfect
Hamesha :focus styles add karo

← Back to Selectors Chapter