Nesting, :has() & Logical Properties in CSS
From the CSS cheat sheet · Modern CSS Features · verified Jul 2026
Nesting, :has() & Logical Properties
Modern CSS features supported in all major browsers
css
/* CSS Nesting (no preprocessor needed) */
.card {
padding: 1rem;
& h2 { font-size: 1.5rem; }
&:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
& .badge { background: green; }
}
/* :has() parent selector */
.card:has(img) { padding: 0; }💡 CSS nesting is native now — same syntax as Sass/SCSS without the preprocessor
⚡ :has() is the most powerful CSS addition in years — style any ancestor based on descendants
📌 Logical properties (inline/block) make layouts work automatically for RTL languages
🟢 accent-color instantly themes checkboxes, radios, ranges, and progress bars
nestinghaslogicalmodern
Continue with CSS
Save the full cheat sheet or work through every related task.