Decoration and parent selection – CSS Practice Problem

Add decoration without changing the HTML, and make a form react to its own state.

What to build

Three rules.

Requirements

label.required::after shows *, in crimson.
A .card containing a checked box has a background of lightcyan, using :has().
a[href^="http"]::after shows ↗.

Constraints

Do not change the HTML, and do not use JavaScript.

Example

.new::before { content: "New: "; }

Why it works

Generated content adds a small visual hint without any change to the HTML, and :has lets a parent respond to what is inside it.

Hints

Hint 1

Read generated content with getComputedStyle(element, "::after") if you want to see it from the console.

Hint 2

A parent can react to a child with :has.

Hint 3

A label with no real text could use content, but the word must stay in HTML.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Generated</title>
  <style>
    label.required::after { content: " *"; color: crimson; }
    .card:has(input:checked) { background: lightcyan; }
    a[href^="http"]::after { content: " ↗"; }
  </style>
</head>
<body>
  <label class="required" for="n">Name</label>
  <input id="n" name="n">
  <div class="card"><label><input type="checkbox" checked> Subscribe</label></div>
  <div class="other"><label><input type="checkbox"> Skip</label></div>
  <a href="https://example.org/">Example</a>
  <a href="/local">Local</a>
</body>
</html>

Lesson: Pseudo-classes and pseudo-elements →