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