<?xml version="1.0" encoding="utf-8"?>

CSS pseudo-class selector

CSS pseudo-class selector Bad Practice
CSS pseudo-class selector Best Practice

Pseudo-classes allow you to target elements that you wouldn't be able to target otherwise. A pseudo-class follows a selector it specifies with a colon (:) between them. Most selectors of this type can be loosely divided into 2 groups:

  • Dynamic pseudo-class selectors, like a:hover: They allow us to target elements that users are interacting with. For example, the :hover selector allows you to change the style of links users hover over.
  • Structural pseudo-class selectors like p:first-child:This type of selector allows us to indicate elements with higher accuracy. For example, :first-child and :last-child allows you to target the first or last element among a group of sibling elements, respectively.[1]
Improve your UX & Product skills with interactive courses that actually work