Chapter 3.6☕ 14 min read

Pseudo-classes & Pseudo-elements

Style elements based on state, position, or specific parts. :hover, :nth-child, ::before, ::after — the CSS power tools.

01Understanding Pseudo-classes

Pseudo-classes style elements based on their state or position. They use a single colon (:).

🍛

Analogy: Just like biryani changes based on ingredients — chicken, mutton, veg — pseudo-classes change styling based on element state like hover, focus, or position in a list.

/* State-based pseudo-classes */
button:hover { background: #ea580c; }        /* On hover */
input:focus { border-color: #f97316; }       /* On focus */
a:visited { color: #9333ea; }                 /* Visited link */
button:active { transform: scale(0.95); }     /* On click */
input:disabled { opacity: 0.5; }              /* Disabled state */

/* Position-based pseudo-classes */
li:first-child { font-weight: bold; }         /* First item */
li:last-child { border: none; }               /* Last item */
li:nth-child(odd) { background: #f3f4f6; }    /* Odd items */
li:nth-child(3) { color: #f97316; }           /* Third item */
li:nth-child(3n+1) { margin-top: 16px; }      /* Every 3rd item starting from 1st */

02Common Pseudo-classes

Most commonly used pseudo-classes:

Pseudo-classUse Case

:hoverMouse over — buttons, links, cards

:focusElement focused — inputs, buttons, links

:focus-visibleKeyboard focus only — accessibility friendly

:activeCurrently being clicked

:disabledDisabled inputs/buttons

:first-childFirst child of parent

:last-childLast child of parent

:nth-child(n)Nth child — formula support (2n, odd, 3n+1)

:not()Negation — everything except this

:emptyElements with no children

03Understanding Pseudo-elements

Pseudo-elements style specific parts of an element. They use two colons (::).

/* ::before and ::after — insert content before/after element */
.quote::before { content: '“'; font-size: 3rem; color: #f97316; }
.quote::after  { content: '”'; font-size: 3rem; color: #f97316; }

/* Must have content property */
.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Other pseudo-elements */
::placeholder { color: #9ca3af; }              /* Input placeholder */
::selection { background: #f97316; color: white; }  /* Selected text */
::first-letter { font-size: 3rem; font-weight: bold; } /* First letter */
::first-line { font-weight: 600; }             /* First line of paragraph */

04Practical Examples

Real-world patterns combining pseudo-classes and elements:

/* Styled input on focus */
input { border: 1px solid #ccc; transition: border-color 0.2s; }
input:focus { border-color: #f97316; outline: none; box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }

/* Alternate row colors */
tr:nth-child(even) { background-color: #f8fafc; }

/* Custom checkbox */
input[type="checkbox"]:checked + label::before { background: #f97316; }

/* Card with icon before title */
h2::before { content: "🔥 "; }

/* List with custom bullets */
li::marker { color: #f97316; font-size: 1.2em; }

05Exercise — Pseudo-classes & Pseudo-elements

Practice pseudo-classes and pseudo-elements below.

Try these experiments:

Add :hover and :focus styles to a button Use nth-child(even) to stripe a list Use ::before to add an emoji icon before headings Use ::after with attr() to create a tooltip Style ::selection with your favorite color

Done — Key Points:

✅ Pseudo-classes (:) style state/position: :hover, :focus, :nth-child, :not().
✅ Pseudo-elements (::) style parts of element: ::before, ::after, ::placeholder.
✅ ::before/::after require content property. Can use attr() for dynamic content.
✅ :nth-child(an+b) supports formulas: odd, even, 3n+1, etc.
✅ :focus-visible is better for keyboard accessibility than :focus alone.

Previous3.5 — CSS Variables 📋 All Chapters Next Chapter3.7 — CSS Functions →