Checkpoint: The Cascade, for Real

Question 1 of 5

@layer base, components;
@layer components {
  .btn { color: white; }
}
a { color: blue; }

<a class="btn" href="#">Buy tickets</a>

• white, because components is the last declared layer.
• blue, because unlayered normal styles beat every layer.
• white, because a class is more specific than a type selector.
• The browser default link color, because the two rules cancel out.

Question 2 of 5

:where(.card) .title { color: green; }
.title { color: red; }

• red, because both selectors score (0,1,0) and red comes later.
• green, because it is more specific.
• green, because descendant selectors beat single selectors.
• Neither; :where() makes the first rule invalid.

Question 3 of 5

• Add transition-behavior: allow-discrete so the custom property is allowed to transition.
• Move --glow to :root so it inherits.
• Register --glow with @property using syntax: "<length>" and an initial value.
• Add will-change: --glow.

Question 4 of 5

• .field:focus
• input:focus + .field
• .field > input:focus
• .field:has(input:focus)

Question 5 of 5

.session-card {
  /* ??? */ { border-color: red; }
}

• & .is-live
• .is-live
• &:is-live
• &.is-live