# Modern Selectors & Native Nesting — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

Source: https://www.geekswithgeeks.com/en/css/css-modern-selectors

> Write shorter CSS with :is(), :where(), :has() and native nesting, supported in all modern browsers.

## :is(), :where() and :has()

`:is()` groups selectors, `:where()` does the same with zero specificity, and `:has()` selects a parent based on its children.

```css
:is(h1, h2, h3) a { text-decoration: none; }
:where(.btn, .link) { color: inherit; }        /* specificity 0 */

/* cards that contain an image */
.card:has(img) { padding-top: 0; }
/* a label whose input is invalid */
label:has(+ input:invalid) { color: crimson; }
```

## Native nesting

CSS now supports nested rules without Sass. Use `&` to refer to the parent.

```css
.card {
  padding: 16px;
  & h3 { margin: 0; }
  &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); }
  @media (min-width: 768px) { padding: 24px; }
}
```

Keep nesting to two or three levels so specificity and readability stay under control.

Quick check

**Quiz:** Which selector picks a parent based on its children?

- [x] :has()
- [ ] :is()
- [ ] :where()
- [ ] :root

*Answer:* :has(). :has() is the relational "parent" selector.