Think you know &?

The & (ampersand) in CSS has some lesser-known uses, and this one is pretty neat. Now that we’ve got CSS nesting (love it!), the ampersand helps apply styles based on how nested selectors relate to each other. Check this out, these styles change the look of the ‘section’ when the checkbox inside it gets checked.

With the :has() selector inside the nested .willDo:checked, the ampersand points right at the parent element and makes it nice and pink too.

<section>
  <input class="willDo" type="checkbox" />
</section>

--color: hotpink;

.willDo:checked {
  background: var(--color);
  border-color: var(--color);

  /* same as .section:has(.willDo:checked) */
  section:has(&) {
    border-color: var(--color);
  }
}

Short and sweet if you ask me!