Content Based Styling

Historically, applying different layouts to a component based on its content required either JavaScript or conditional logic in your HTML templating language to inject modifier classes (like .card--has-image or .card--text-only).

The :has() pseudo-class eliminates this need by acting as a parent selector. It allows you to conditionally style a container element based on the presence or absence of specific descendant elements.

Using :has(), you can easily define distinct layout variations entirely in CSS based on a component's actual DOM content. You can also optionally combine it with :not() to explicitly target the absence of content to define default layouts.

Implementing content-based container styling

MANDATORY: You must use the :has() selector on the container element to detect the presence of specific child content.

To build a component that changes its layout based on its content:

1. Define the default styling: Apply the base layout styles to the container element (e.g., a simple single-column stack).
2. Apply content-based overrides: Target the container with :has([child-selector]) and apply the new layout styles for when that content is present (e.g., a multi-column grid).

Example: A card component that switches to a side-by-side layout if an image is present.

/* 1. Define the default state on the component container */
/* This applies when there is NO image */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* 2. Apply styles when a specific child element is present */
/* MANDATORY: Target the container and use :has() to check for the descendant */
.article-card:has(img) {
  /* Change the layout to a row if an image exists */
  flex-direction: row;
  align-items: center;
}

/* Optional: Style the image itself (no :has() needed here) */
.article-card img {
  width: 150px;
  height: auto;
  border-radius: 4px;
}

/* You can also combine :has() and :not() to explicitly target the ABSENCE of content */
/* This selects a card that DOES NOT have an image */
.article-card:not(:has(img)) {
  /* E.g., apply a different background color for text-only cards */
  background-color: #f9f9f9;
}

<!-- Assume an <h1> precedes these components in the document layout -->
<!-- A card WITH an image (will use row layout) -->
<article class="article-card">
  <img src="thumbnail.jpg" alt="Article thumbnail" />
  <div class="content">
    <h2>Card With Image</h2>
    <p>This card lays out its content horizontally.</p>
  </div>
</article>

<!-- A card WITHOUT an image (will use default column layout) -->
<article class="article-card">
  <div class="content">
    <h2>Text-Only Card</h2>
    <p>This card lays out its content vertically, and gets its background color from the :not(:has()) rule.</p>
  </div>
</article>

Performance tip: When using :has(), scope the selector to the most specific component container possible (like .article-card). Avoid anchoring it to very high-level elements like body:has(img) if the styling changes are highly localized, as broad :has() queries can trigger more layout recalculations.

Fallback strategies

If the content-based layout styling is critical to the user experience or page design, you must provide a fallback for browsers that do not support the :has() selector. For purely decorative effects, :has() can be used as a progressive enhancement without a fallback.

MANDATORY: When implementing a fallback for critical layouts, you must use @supports not selector(:has(*)) in your CSS to define a traditional class-based fallback (e.g., .has-image).

Unlike interactive state-based styling, content presence is typically known at render time. The most robust fallback is to have your server-side templating engine (or static site generator) inject a class like .has-image onto the container if the child element (like an image) exists in the data.

If server-side rendering is not an option, you must use a small script with CSS.supports() to detect the content and append the class on load or after dynamic content injection.

/* Fallback CSS for older browsers */
/* We check if the browser DOES NOT support the :has() selector */
@supports not selector(:has(*)) {
  /* Define a traditional modifier class that applies the exact same layout overrides */
  .article-card.has-image {
    flex-direction: row;
    align-items: center;
  }
  
  .article-card:not(.has-image) {
    background-color: #f9f9f9;
  }
}

/* Fallback JavaScript for older browsers (if not using SSR to add the class) */
/* Check for support before running the script to avoid unnecessary work in modern browsers */
if (!CSS.supports('selector(:has(*))')) {
  // Find all components that need checking
  const cards = document.querySelectorAll('.article-card');
  
  cards.forEach(card => {
    // If the critical content exists, manually add the fallback class
    if (card.querySelector('img')) {
      card.classList.add('has-image');
    }
  });
}