CSS Parent Styling Techniques

—

### 1. **Using the `:has()` Pseudo-Class**
The `:has()` pseudo-class allows you to style a parent element based on its child elements. This is supported in modern browsers.

.parent:has(.child) {
  background-color: lightblue;
}

This CSS will apply a `background-color` to `.parent` if it contains a `.child` element.

—

### 2. **Using JavaScript**
If browser support for `:has()` is not sufficient, you can achieve the same effect using JavaScript:

document.querySelectorAll('.child').forEach(child => {
  const parent = child.closest('.parent');
  if (parent) {
    parent.style.backgroundColor = 'lightblue';
  }
});

—

### 3. **Using Inherited Styles**
In some cases, you can use styles on the parent element that are influenced by the child element indirectly:

.parent {
  font-size: 16px; /* Default style */
}

.child {
  font-size: inherit; /* Inherit parent's font-size */
}

—

### 4. **Using SASS or LESS for Nesting**
If you're using a CSS preprocessor like SASS or LESS, you can structure your styles in a more readable way, but it won't allow targeting parents directly.

.parent {
  .child {
    // This only styles .child, not .parent
  }
}

—

### 5. **Adding a Parent Class Dynamically**
If you're generating HTML dynamically, you can add a class to the parent when the child meets a condition.

<div class="parent has-child">
  <div class="child"></div>
</div>

.parent.has-child {
  background-color: lightblue;
}

—

### Browser Support Notes:
– `:has()` is supported in modern versions of Chrome, Edge, and Safari. For older browsers (e.g., Firefox