Feature Queries and CSS Nesting

What Is It?

A feature query applies enhancements when the browser understands a declaration. Native CSS nesting groups related selectors inside a rule.

Properties, Tags and Attributes Explained

• @supports: Tests syntax support for a declaration or selector; it is not a guarantee of perfect rendering.
• &: Refers to the parent selector in a nested rule.
• fallback: A working base style written before an optional enhancement.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Progressive enhancement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Queries and CSS Nesting</title>
  <style>
    .demo { display: block; }
    .demo > div { background: #dbeafe; padding: 12px; margin: 4px; }
    @supports (display: grid) { .demo { display: grid; grid-template-columns: repeat(3, 1fr); } }
  </style>
</head>
<body>
  <div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>

What you see: A browser supporting Grid enhances stacked content into columns.

Example 2: Nested states

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Queries and CSS Nesting</title>
  <style>
    .card { padding: 16px; border: 2px solid #cbd5e1; & h3 { color: #1d4ed8; } &:hover { border-color: #7c3aed; } }
  </style>
</head>
<body>
  <article class="card"><h3>Nested rules</h3><p>Hover over this card.</p></article>
</body>
</html>

What you see: A nested heading rule sets the color, and a nested hover rule changes the card border in supporting browsers.

When and Where to Use It

Use supports for optional enhancements and short nesting blocks for component states and closely related descendants.

Common Mistake or Useful Tip

Native nesting is not a full Sass replacement. Avoid deeply nested selectors and verify the browsers you need to support.

Try It Yourself

Rewrite the nested rules as ordinary .card h3 and .card:hover selectors.