A Comprehensive Guide to New CSS Features: @scope, @container, Pseudo‑Classes, Nesting, nth‑of, text‑wrap, and Native Popover

Introduction

The author shares personal anecdotes about using newer CSS units (vmin/vmax) and layout methods (flex vs. grid) early in their career, then pivots to a discussion of modern CSS features that are worth learning in 2024.

@scope – Native CSS Style Isolation

Just as Vue scoped styles, CSS‑in‑JS, and CSS Modules provide isolation, the native @scope rule offers built‑in style encapsulation without extra tooling.

Syntax

@scope (scope root) to (scope limit) {
  rulesets
}

Three common usage patterns are demonstrated.

Usage 1 – Only the first parameter

HTML:

<div class="box">
  <div class="red">这里是红色</div>
</div>
<div class="red">这里不是红色</div>

CSS:

<style>
  @scope (.box) {
    .red { background-color: red; }
  }
</style>

Only the .red inside .box becomes red, proving successful isolation.

Usage 2 – Using to to filter

HTML includes a .filter wrapper. The @scope (.box) to (.filter) rule applies the style to .red elements that are **not** inside .filter, effectively filtering them out.

Usage 3 – No parameters

When no root is supplied, the rule applies to the nearest enclosing element in the markup, allowing inline style blocks to act as scoped containers.

@container – Container Queries

Container queries let styles react to the size of a parent element rather than the viewport, redefining responsive design.

<style>
  .demo {
    width: 200px;
    height: 200px;
    background: red;
    container-name: sidebar;
    container-type: inline-size;
  }
  @container sidebar (width > 300px) {
    a { background: green; }
  }
</style>

<div class="demo"><a>我的背景色会随着demo元素的宽度而变化</a></div>

The key syntax is @container container-name (condition) { … }. The article lists possible values for container-type: normal, size, inline-size, and mentions the shorthand container: sidebar / inline-size.

Advanced Pseudo‑Classes: :has, :where, :is

:has

selects a parent element based on its descendants (e.g., div:has(p) { color: red; }), useful for cases where a wrapper lacks a class. :where groups selectors without adding specificity, allowing concise rules such as :where(header, main, footer) a:hover { color: red; }. :is behaves like :where but retains the specificity of its most specific argument.

Native CSS Nesting

Modern browsers now support native CSS nesting, similar to Sass/LESS but with subtle differences. Example:

.box {
  .red { color: red; }
}

.box {
  & .red { color: red; } /* not valid in native CSS */
}

The article warns that Sass‑style ampersand nesting ( &--header) is not yet supported natively.

Using :nth-child with of

When you need to target the second .p2 element among many p tags, the new :nth-child(2 of .p2) selector works perfectly.

:nth-child(2 of .p2) { color: red; }

text‑wrap: balance & pretty

The text-wrap: balance property automatically distributes words evenly across two lines, while text-wrap: pretty prevents a single word from appearing alone on the last line.

Native popover Element

Browsers now provide a built‑in popover attribute, eliminating the need for JavaScript to show/hide menus.

<button class="menu-btn" popovertarget="menu">
  <img src="..." alt="" />
</button>

<div popover role="menu" id="menu">
  <button class="close-btn" popovertarget="menu" popovertargetaction="hide">
    <span>❌</span> <span class="sr-only">Close</span>
  </button>
  <ul>
    <li><a href="#">Typography</a></li>
    ...
  </ul>
</div>

Adding popover to a container and linking it with popovertarget creates a fully functional pop‑up without extra scripts.