HTML & CSS · Quick Reference

Lesson 12 — Modern CSS & Best Practices Cheat Sheet

HTML & CSS

In one line: These three pseudo-class functions arrived in browsers around 2021–2022 and have quickly become essential. They let you write shorter, smarter selectors without the combinatoria...

Key Ideas

1Modern Selectors: :is(), :where(), :has(). These three pseudo-class functions arrived in browsers around 2021–2022 and have quickly become essential. They let you write shorter, smarter selectors without the co...

2:is() — Smart Grouping. :is() lets you group selectors in a list. The specificity of :is() is determined by the most specific selector in its argument list. It collapses dozens of repetitive ...

3:where() — Zero-Specificity Grouping. :where() works exactly like :is() but with zero specificity. This makes it perfect for base/reset styles that you want any author style to override easily.

4:has() — The Parent Selector 🎉. For years developers begged for a way to select a parent based on its children. :has() finally delivers. It is the most powerful selector ever added to CSS — it lets y...

5Container Queries. Media queries respond to the viewport width. But what if a component is used in both a full-width page and a narrow sidebar? Container queries let a component respond ...

Code Examples

/* OLD WAY — repetitive */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
}

/* MODERN WAY — :is() groups them */
:is(h1, h2, h3, h4, h5, h6) a {
  color: inherit;
  text-decoration: none;
}

/* Combine contexts ...

/* :where() has 0 specificity — easy to override */
:where(ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* This single-class rule easily overrides the :where() above */
.my-list {
  list-style: disc;  /* wins because .class > :whe...

/* Style a card differently if it contains an image */
.card:has(img) {
  padding: 0;           /* remove padding when image present */
}

/* Style a form when any input is invalid */
form:has(:invalid) {
  border: 2px solid red;
}

/* Style a lab...