CSS variables, container queries, and the :has() pseudo-class are transforming modern CSS by enabling dynamic, component-based designs without relying on JavaScript. 1. CSS variables allow reusable, dynamic values for consistent theming and real-time updates via JavaScript. 2. Container queries make components responsive based on their container’s size, not just the viewport, improving reusability in complex layouts. 3. The :has() pseudo-class enables conditional styling by selecting parents based on their children or siblings, reducing the need for JavaScript and enhancing accessibility. Together, these features make CSS more expressive, maintainable, and production-ready in modern browsers.

Modern CSS has evolved far beyond simple styling—today, it’s a powerful tool that lets developers tackle complex layouts, responsive designs, and dynamic interactions directly in the stylesheet. Three standout features—CSS custom properties (variables), container queries, and the :has() pseudo-class—are transforming how we write and think about CSS. Let’s break down how each one works and why they’re game-changers.

CSS Variables: Dynamic Styling Without JavaScript

CSS variables (officially called custom properties) allow you to define reusable values right in your CSS. This makes themes, design tokens, and global style changes much easier to manage.

:root {
  --primary-color: #007bff;
  --border-radius: 8px;
  --spacing: 1rem;
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
}

Why they’re powerful:

• Theme switching: Change colors, fonts, or spacing globally with a single class toggle.
• Component consistency: Define design tokens once and reuse them across components.
• Dynamic updates: Change values via JavaScript, enabling real-time theme switches.

document.documentElement.style.setProperty('--primary-color', 'purple');

Variables aren’t just for colors—they can store any CSS value: sizes, shadows, even entire animation definitions.

Container Queries: Responsive Design Based on Component Size

For years, media queries tied responsiveness to the viewport. But what if a component needs to adapt based on its own container—not the screen size? That’s where container queries come in.

First, you define a container:

.card-container {
  container-type: inline-size;
  container-name: card;
}

Then, apply styles based on the container’s width:

@container card (min-width: 300px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

@container card (min-width: 500px) {
  .card-header {
    font-size: 1.5rem;
  }
}

Why they matter:

• Truly reusable components: A card can respond to its space, whether it’s in a sidebar or full-width.
• Better composability: No more passing props or classes to adjust layout based on context.
• Future of component-driven design: Works beautifully with web components and design systems.

Container queries are especially useful in grid layouts, dashboards, or CMS-driven sites where content placement is dynamic.

:has() – The "Parent Selector" We’ve Waited For

For years, CSS lacked a way to select an element based on its children or following siblings. :has() finally closes that gap. Think of it as a "parent selector" or "relational selector."

Examples:

/* Style a list only if it has links */
ul:has(a) {
  background: #f0f0f0;
  padding: 1rem;
}

/* Highlight a form when it contains an invalid input */
form:has(input:invalid) {
  border: 2px solid red;
}

/* Style a heading only if followed by a long paragraph */
h2:has(  p:nth-of-type(2)) {
  margin-bottom: 1rem;
}

Why it’s revolutionary:

• Conditional styling: Apply styles based on content structure.
• Reduce JavaScript: No more adding .has-errors classes via JS—CSS can detect the state.
• Improved accessibility: Visually style containers based on their content without extra hooks.

Browser support is solid in modern browsers (Chrome, Safari, Firefox 121 ), but check for older environments.

These three features—variables, container queries, and :has()—show how modern CSS is becoming more expressive, context-aware, and component-friendly. You don’t need a framework or JavaScript to create smart, adaptive interfaces. With a few lines of CSS, you can build more resilient, maintainable UIs.

Basically, if you’re still writing CSS like it’s 2015, it’s time to level up. These tools are no longer experimental—they’re practical, performant, and ready for production.

The above is the detailed content of The Power of Modern CSS: Variables, Container Queries, and :has(). For more information, please follow other related articles on the PHP Chinese website!