Advanced CSS Selectors

Modern CSS introduced functional pseudo-classes that help you target elements more efficiently. These selectors make complex styling rules simpler and more readable. Let’s explore each one in detail:

:is() Selector

• The :is() pseudo-class allows you to group multiple selectors into one rule.
• Instead of repeating styles for similar elements, you can combine them using :is().
• Why useful? It reduces code duplication, makes CSS shorter, and easier to maintain.

Example :

Style all headings and paragraphs inside a section with one rule.

section :is(h1, h2, h3, p) {
  color: #333;
  font-family: Arial, sans-serif;
}

:where() Selector

• The :where() selector works like :is(), but the big difference is specificity.
• :where() has zero specificity, meaning it won’t override other rules.
• Why useful? Perfect for applying global or fallback styles without fighting with stronger CSS rules.

Example :

Apply margin reset to multiple elements without increasing specificity.

:where(h1, h2, h3, p) {
  margin: 0;
  padding: 0;
}

:has() Selector

• The :has() pseudo-class is sometimes called the “parent selector” in CSS.
• It allows you to select an element based on its children or descendants.
• Why useful? Before :has(), CSS couldn’t look “upward” (from child to parent). Now, we can style a parent only if it contains something specific.

Example :

Style a card only if it has an image inside.

.card:has(img) {
  border: 2px solid green;
  background: #f9fff9;
}

:not() Selector

• The :not() pseudo-class excludes elements from being styled.
• It allows you to apply styles to everything except specific elements.
• Why useful? Saves time and avoids unnecessary overrides.

Example :

Style all list items except the first one.

li:not(:first-child) {
  color: gray;
}

Flow of Advanced CSS Selectors

Advanced CSS Selectors
    │
    ├── :is() → Groups multiple selectors into one
    │
    ├── :where() → Groups selectors with zero specificity
    │
    ├── :has() → Selects a parent if it contains specific children
    │
    └── :not() → Excludes elements from selection