Styling Details: Selectors, Pseudo-elements, and Motion

Add finishing detail with practical selectors, pseudo-elements, transitions, transforms, and restrained animation.

Practical Selectors: Targeting Exactly What You Need

You already know element selectors (p), class selectors (.card), and ID selectors (#main). But CSS has a much wider vocabulary for targeting elements — and using it well means you can style precisely without adding extra classes to your HTML.

Combinators: relationships between elements

Combinators let you select elements based on their position in the DOM tree relative to another element:

/* Direct child only — not deeper descendants */
.card > h2 { font-size: 1.25rem; }

/* Adjacent sibling — the p immediately after an h2 */
h2 + p { margin-top: 0.5rem; }

/* General sibling — any p after an h2, at the same level */
h2 ~ p { color: #52606d; }

The child combinator (>) is especially useful for preventing styles from leaking into nested components. If you style .nav a, every link inside nav is affected — including links inside a dropdown. .nav > a targets only the direct children.

Attribute selectors: matching by data, not appearance

/* Match inputs by type */
input[type="email"] { border-color: #3d85c6; }

/* Match links that open in a new tab */
a[target="_blank"]::after { content: " ↗"; }

/* Match elements whose class starts with "icon-" */
[class^="icon-"] { display: inline-block; }

Attribute selectors are powerful for form styling and for targeting elements without adding extra classes. They score the same as classes in specificity.

Structural pseudo-classes: position in a list

/* First and last items */
li:first-child { font-weight: 700; }
li:last-child { border-bottom: none; }

/* Every other row (striped tables) */
tr:nth-child(even) { background: #f8f9fa; }

/* Only child — useful for conditional layouts */
.card:only-child { max-width: 600px; margin: 0 auto; }

Structural pseudo-classes let you style elements by their position without adding .first or .last classes manually. The browser handles the counting.

State pseudo-classes: interactivity

/* User interaction states */
a:hover { color: #8f2f23; }
a:focus-visible { outline: 2px solid #3d85c6; outline-offset: 2px; }
button:active { transform: scale(0.98); }

/* Form validation states */
input:required { border-left: 3px solid #e67c00; }
input:valid { border-left-color: #2d6a4f; }

State pseudo-classes respond to user behaviour. :focus-visible is especially important — it shows a focus ring for keyboard users but hides it for mouse clicks, giving you the best of both worlds for accessibility.

Pseudo-elements: Visual Detail Without Extra HTML

Pseudo-elements let you insert styled content before or after an element's real content, entirely through CSS. They are ideal for decorative details — underlines, icons, badges, dividers — that do not belong in the HTML because they are presentational, not structural.

The essential rule: content is required

Every ::before and ::after pseudo-element must have a content property. Even if the content is an empty string, the property must be there:

/* This works — empty string creates a styled box */
.heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #8f2f23;
}

/* This does NOT work — no content means no element */
.heading::after {
  display: block;
  width: 60px;
  height: 3px;
  background: #8f2f23;
}

Practical pseudo-element patterns

.section-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #8f2f23;
  margin-top: 0.5rem;
}

a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
  color: #7b8794;
}

label.required::after {
  content: " *";
  color: #8f2f23;
  font-weight: 700;
}

Transitions: Smooth Property Changes

Without a transition, CSS property changes are instant. One frame the link is blue, the next frame it is red. Transitions add a duration to that change, letting the browser interpolate between the old and new values over time.

Setting transitions on the base state

Transitions belong on the element's default state, not on the trigger state. This ensures the transition runs in both directions — on hover and on hover-out:

/* ✅ Correct — transition on the base state */
.nav-link {
  color: #1f2933;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: #8f2f23;
}

/* ❌ Wrong — transition only on :hover means
   the return to default is instant */
.nav-link {
  color: #1f2933;
}
.nav-link:hover {
  color: #8f2f23;
  transition: color 0.2s ease;
}

Choosing what to transition

Be specific about which properties you transition. Using transition: all is tempting but it can cause unexpected animations on properties you did not intend to change — including expensive layout properties:

/* ❌ Transitions everything, including layout properties */
.card { transition: all 0.3s ease; }

/* ✅ Only the properties you want animated */
.card {
  transition: background-color 0.2s ease,
              box-shadow 0.2s ease;
}

Timing functions

The timing function controls the speed curve. For most UI work, you only need two or three:

• ease — starts fast, ends slow. Good default for most hover effects.
• ease-in-out — slow start and slow end. Good for elements entering and leaving visibility.
• linear — constant speed. Useful for progress bars or loading indicators, but feels mechanical for UI.

Transforms: Visual Changes Without Layout Shifts

Transforms change how an element looks — its position, size, or rotation — without affecting the document flow. The element keeps its original space in the layout, and neighbouring elements do not shift.

This makes transforms ideal for interactive effects. A hover lift, a button press, or a card entrance can use transforms without causing the rest of the page to reflow.

translate: shift position

/* Hover lift — the classic card effect */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

scale: grow or shrink

/* Button press feedback */
.button:active {
  transform: scale(0.97);
}

/* Subtle image zoom on hover */
.thumbnail:hover {
  transform: scale(1.03);
}

rotate: tilt

/* Playful hover accent on a small icon */
.icon-link:hover .icon {
  transform: rotate(8deg);
}

Combining transforms

You can apply multiple transforms in a single declaration. They are applied right to left:

/* Lift + slight scale on hover */
.card:hover {
  transform: translateY(-4px) scale(1.02);
}

Restrained Motion: When Animation Helps and When It Hurts

Motion in CSS is a tool, not a feature list. A well-placed transition makes an interface feel responsive. An excessive animation makes it feel chaotic.

prefers-reduced-motion: Respecting User Preferences

Some users experience motion sickness, vertigo, or discomfort from screen animations. Operating systems let users signal this preference, and CSS lets you respond to it with a media query:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

This is a near-instant duration rather than none, which ensures JavaScript-based animation callbacks still fire. Place this at the end of your stylesheet.

You can also be more surgical — keeping subtle colour transitions while removing movement:

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: background-color 0.2s ease;
    /* Remove the lift transform but keep the colour shift */
  }
  .card:hover {
    transform: none;
  }
}

Recap

This lesson covered the CSS tools that turn a working layout into a polished page. Combinators and pseudo-classes let you target elements precisely without cluttering your HTML with extra classes. Pseudo-elements add decorative detail through CSS alone — a heading underline, an external-link indicator, a required-field marker — without extra DOM elements.

Transitions smooth out property changes over time. Set them on the base state, be explicit about which properties to transition, and keep durations between 0.15s and 0.4s for UI interactions. Transforms — translate, scale, rotate — change how an element looks without affecting its space in the document flow, making them ideal for hover lifts, button presses, and subtle reveals.

The hardest skill is restraint. Good motion supports the user's attention. Excessive motion fights it. And prefers-reduced-motion is not a feature — it is a responsibility.