探索新的CSS：IS（）和：where（）偽級

:is() 和:where() 是功能強大且語法簡潔的CSS 偽類，用於簡化選擇器編寫並解決特異性問題。 1. :is() 可將多個選擇器分組，減少重複代碼並保持原有特異性，適用於需要維護可讀性和結構清晰的場景；2. :where() 語法與功能類似，但其特異性始終為零，非常適合設置可被輕鬆覆蓋的默認樣式，常用於設計系統或組件庫；3. 兩者均支持複雜選擇器和嵌套結構，提升代碼可維護性；4. 瀏覽器支持良好，現代瀏覽器已廣泛兼容，舊環境可漸進增強使用。正確使用這兩個偽類能讓CSS 更加靈活、健壯且易於擴展。

CSS has quietly gotten a lot more powerful — and a bit more elegant — with the introduction of the :is() and :where() pseudo-classes. These aren't just syntactic sugar; they solve real pain points in writing and maintaining CSS selectors. If you've ever found yourself repeating long selector lists or struggling with specificity issues, these two pseudo-classes are here to help.

Let's break down what they do, how they're different, and why you'll want to start using them.

What :is() Does (and Why It's Useful)

:is() is a CSS pseudo-class that takes a selector list and matches any element that fits at least one of the selectors inside it. Think of it as a way to group selectors without repeating the same pattern over and over.

Before :is() , you might write something like this:

 .card:hover,
.sidebar:hover,
.nav-link:hover,
.modal-header:hover {
  opacity: 0.8;
}

That's repetitive and hard to maintain. With :is() , you can simplify it:

 :is(.card, .sidebar, .nav-link, .modal-header):hover {
  opacity: 0.8;
}

This is cleaner, easier to read, and much easier to update. Just add or remove a class from the list inside :is() .

It also works with more complex selectors:

 :is(header, main, footer) h1 {
  font-size: 2rem;
}

This applies the style to h1 elements inside header , main , or footer .

Key benefit : :is() follows normal specificity rules — the specificity is determined by the most specific selector in the list. So if one of the items in :is() is #id , the whole selector gets high specificity.

How :where() Is Different (and When to Use It)

:where() looks and works almost exactly like :is() — it also takes a list of selectors and matches any that apply. But here's the critical difference :

:where() always has zero specificity .

That means no matter what you put inside :where() , it won't add any specificity weight to the selector.

This is incredibly useful for default styles or reset/utility patterns , where you want to define base styles that are easy to override later.

For example, a UI library might set default button styles:

 :where(button, [role="button"], .btn) {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  background: #f0f0f0;
  border-radius: 4px;
}

Because :where() has zero specificity, a simple class rule later in the CSS can easily override it:

 .primary-button {
  background: blue;
  color: white;
}

Without :where() , you'd often need to use !important or match high specificity (like button.btn.primary ), which gets messy.

Use :where() when you want flexible, override-friendly styles — especially in design systems or component libraries.

Practical Examples and Real-World Use Cases

1. Simplifying Nested Hover States

You want any direct child of a container to respond to hover:

 .container :is(.card, .item, .post):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

Clean and scalable.

2. Resetting Styles Without Fighting Specificity

Use :where() in a reset or base layer:

 :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

Now you can style a specific list later without worrying about being overridden by reset rules.

3. Responsive Utility Classes

Combine with utility-first approaches:

 :where(.md\\:hover:hover) {
  /* Only applies when .md:hover is used, but won't fight other styles */
}

Note: You need to escape the colon with \\: in class names.

Browser Support and Compatibility

Both :is() and :where() are widely supported in modern browsers:

• :is() — Supported in Chrome 88 , Firefox 78 , Safari 13.4
• :where() — Chrome 88 , Firefox 78 , Safari 14.1

For older browsers, you may need to stick with traditional selectors or use build tools that can expand these (though no reliable autoprefixer exists yet for :is() / :where() ).

If you're targeting older environments, consider using them progressively — they fail silently, so fallbacks can be provided.

Summary: :is() vs :where()

Use :is() when you want cleaner, more maintainable CSS without changing how specificity works.

Use :where() when you want to set defaults that won't get in the way later.

Both make CSS more expressive and less fragile. And honestly, once you start using them, you'll wonder how you lived without them.

Basically — they're small features with big impact.

以上是探索新的CSS：IS（）和：where（）偽級的詳細內容。更多資訊請關注PHP中文網其他相關文章！