Modern Selectors
📌 Covered in this chapter:
:is() · :where() · :has() · :not() · Attribute Selectors · Relational · Form State · Focus · Performance · Browser Support
Welcome to Chapter 42: Modern Selectors — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
📚 What You Will Learn
- :is(), :where(), :has(), :not() functional selectors
- Parent selection with :has() — previously impossible in CSS
- Attribute and form state selectors for modern UIs
- Selector performance best practices
- Browser support and progressive enhancement strategies
💡 Why This Matters
:has() changed CSS forever — "parent selector" problem solved. :where() gives zero specificity grouping. These modern selectors reduce HTML class bloat and enable powerful conditional styling previously requiring JavaScript.
1:is() and :where() — Grouping Selectors
/* Longhand */
h1, h2, h3, h4 { line-height: 1.2; }
/* :is() — takes highest specificity of arguments */
:is(h1, h2, .title) { line-height: 1.2; }
/* :where() — zero specificity boost */
:where(h1, h2, h3) { margin-bottom: 0.5em; }
/* Easy to override with .article h2 { margin-bottom: 1em; } */| Property / Selector | Explanation |
|---|---|
:is(a, b, c) | Groups selectors — specificity = highest argument |
:where(a, b, c) | Groups selectors — specificity always 0 |
:not(.excluded) | Exclude matching elements from rule |
2:has() — The Parent Selector Revolution
CSS — :has() Examples▶ Try in Editor
/* Style card IF it contains an image */
.card:has(img) { padding-top: 0; }
/* Form group with invalid input */
.form-group:has(input:invalid) {
border-left: 3px solid #dc2626;
}
/* Previous sibling styling (no JS!) */
h2:has(+ p) { margin-bottom: 0.25em; }
/* Navigation: highlight parent if child active */
.nav-item:has(.nav-link--active) {
background: #eff6ff;
}
🖥️ Expected Browser Output:
Card with image — no top padding. Form group with invalid email — red left border. Active nav link parent — light blue background. All without JavaScript.
3Form State & Focus Selectors
input:user-valid { border-color: #16a34a; }
input:user-invalid { border-color: #dc2626; }
input:required:user-invalid { box-shadow: 0 0 0 3px rgba(220,38,38,0.2); }
input:focus-visible { outline: 3px solid #93c5fd; }
input:autofill { background-color: #fef9c3 !important; }4Selector Performance
- Right-most selector most important — browser matches right to left
- Avoid universal selector in deep chains:
body div * span - Prefer classes over complex descendant chains
- :has() can be expensive — use on limited elements, not
*:has(...) - Modern browsers optimize common patterns well — don't premature optimize
❓ Mini Quiz
Q1 :has() ni "parent selector" antaru enduku?
Element style cheyadaniki adi tana child/descendant state batti decide avuthundi — previously only JS could do this.
Q2 :where() vs :is() — eppudu :where() use cheyali?
Reset/base styles ki — zero specificity so component styles easily override avuthayi.
✅ Quick Recap
- :is() groups with specificity; :where() groups without specificity
- :has() enables parent and sibling conditional styling
- :not() excludes elements from matching
- Form pseudo-classes: :user-valid, :user-invalid, :focus-visible
- Keep selectors shallow and class-based for performance