:has() lets a parent react to what is inside it.

For twenty years CSS could style an element by what it sits in, but never by what it holds. :has() changes that. .card:has(img) matches a card when an image sits anywhere inside it.

The element you style is the one before :has(). The selector in the brackets is only the test. So .card:has(img) styles the card, not the image.

Real uses: give cards with a photo a different border, mark a table row that holds a warning, or space a form out once it holds an error.

<div class="card">
  <img src="cat.svg" alt="Pickles">
  <p>Pickles, 3 years</p>
</div>
<div class="card">
  <p>Name to come</p>
</div>

.card {
  padding: 12px;
  border: 3px solid #e5e7eb;
}
.card:has(img) {
  border-color: #0f766e;
}