CSS :has Pseudo Class - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Default card styling */
.card {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
  font-family: sans-serif;
  transition: all 0.3s ease;
}

/* The :has() selector */
/* This targets the .card DIV itself */
.card:has(img) {
  background-color: #f0f9ff;
  border-color: #007bff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* You can also style children based on the parent's state */
.card:has(img) h2 {
  color: #007bff;
}

img {
  max-width: 100%;
  border-radius: 4px;
}</style></head><body><div class="card">
  <h2>Just Text</h2>
  <p>This card does not have an image, so it stays basic.</p>
</div>

<div class="card">
  <img src="images/2.png" alt="Placeholder">
  <h2>Image Card</h2>
  <p>This card has an image, so the parent container changes!</p>
</div></body></html>