Is, Where, Not and Has Selectors

What Is It?

Functional pseudo-classes express alternatives, exclusions, and relationships without adding extra classes to every element.

Properties, Tags and Attributes Explained

• :is(): Matches any selector in its list; specificity comes from its most specific argument.
• :where(): Matches alternatives with zero specificity for the function and its arguments.
• :not(): Excludes matches; specificity follows its most specific argument.
• :has(): Matches an element when a relative selector matches from that element; specificity follows its most specific argument.

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: Alternatives and exclusions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Is, Where, Not and Has Selectors</title>
  <style>
    :is(h2, h3) { color: #1d4ed8; }
    p:not(.muted) { border-left: 3px solid #7c3aed; padding-left: 8px; }
    :where(.muted) { color: #64748b; }
  </style>
</head>
<body>
  <h2>Lesson</h2><p>Main note</p><h3>Details</h3><p class="muted">Optional reading</p>
</body>
</html>

What you see: Both headings are blue; only the unmuted paragraph gets a border.

Example 2: React to a checked child

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Is, Where, Not and Has Selectors</title>
  <style>
    .option { display: block; padding: 16px; border: 2px solid #cbd5e1; }
    .option:has(input:checked) { border-color: #15803d; background: #dcfce7; }
  </style>
</head>
<body>
  <label class="option"><input type="checkbox"> Include practice exercises</label>
</body>
</html>

What you see: Checking the child input styles the containing label.

When and Where to Use It

Use where for easily overridden defaults, is for selector alternatives, and has for parent styling based on actual child state.

Common Mistake or Useful Tip

Including an ID in an is, not, or has argument list can raise specificity even when that particular argument is not the one matching.

Try It Yourself

Add a stronger class rule after the where default and check which value wins.