Practical Tasks & Code Challenges

Test your mastery of CSS selectors, typography scaling, attribute matching, and pseudo-elements with three production-grade engineering challenges.

Challenge 1: Relational Target & Zero Specificity Overrides

Problem Statement

You are maintaining a component library UI. A developer set default link styles using standard classes (.card a), which created high specificity and broke a low-priority reset designed to strip styles from buttons using :where(). Furthermore, cards containing external links need a highlighted border using :has().

Buggy Code Snippet

/* High specificity rule overriding low-priority reset */
.card a {
  color: #2563eb;
  text-decoration: underline;
}

/* This reset rule fails to apply due to zero specificity! */
:where(.card) a.btn-reset {
  color: inherit;
  text-decoration: none;
}

Task Requirements

Refactor the navigation links so that default typography reset styles inside :where() work without adding !important.
Target all links whose href attribute starts with https:// and append an inline indicator (↗) using ::after.
Use the relational parent pseudo-class :has() to apply a 2px solid #38bdf8 border to any .card container that encloses an external link.

Implementation Strategy

Zero Specificity Reset: Keep base styles inside :where(a) or lowering the card anchor selector specificity allows :where() defaults to override gracefully when structured properly.
Attribute Substring Matcher (^=): Use a[href^="https://"] to filter protocol links.
Relational Parent (:has()): Use .card:has(a[href^="https://"]) to detect nested DOM structures dynamically without JavaScript.

/* 1. Low specificity reset */
:where(.card) a {
  color: inherit;
  text-decoration: none;
}

/* 2. Target specific link types cleanly */
.card a.link-active {
  color: #2563eb;
  text-decoration: underline;
}

/* 3. External link generated content */
a[href^="https://"]::after {
  content: " ↗";
  font-size: 0.85em;
}

/* 4. Parent selection based on children */
.card:has(a[href^="https://"]) {
  border: 2px solid #38bdf8;
}

Challenge 2: Fluid Typography & State Micro-Interactions

Goal

Implement a responsive card with fluid typography using clamp(), unitless line height, and accessible keyboard focus state micro-interactions.

Requirements

Set the card title <h1> to scale dynamically between 1.5rem (min) and 2.5rem (max), with a preferred fluid width calculation of 4vw.
Apply a unitless line-height: 1.25 for the title and 1.6 for the body text.
Configure button focus states using :focus-visible to display an offset outline ring (3px solid #38bdf8, outline-offset: 3px) when navigated via keyboard.
Style the first paragraph inside the card body as a lead paragraph using :first-of-type with font-size: 1.1rem and color: #cbd5e1.

Interactive Coding Lab

Refactor and debug the live sandbox below to complete all challenge requirements.

Loading Interactive Editor...

Challenge Verification Matrix

Challenge	Target Objective	Verification Step
Relational Parent	Style `.card` based on nested external link	Card 1 displays a `#38bdf8` border; Card 2 does not
Attribute Matcher	Append `↗` icon to HTTPS links automatically	External link displays generated text node via `::after`
Fluid Clamp	`clamp(1.5rem, 4vw, 2.5rem)`	Resizing preview pane dynamically alters `<h1>` font size
Accessibility Focus	Focus ring on keyboard navigation	Pressing `Tab` renders an outlined indicator ring

Challenge 1: Relational Target & Zero Specificity Overrides​

Problem Statement​

Buggy Code Snippet​

Task Requirements​

Implementation Strategy​

Challenge 2: Fluid Typography & State Micro-Interactions​

Goal​

Requirements​

Interactive Coding Lab​

Challenge Verification Matrix​