<div class="post">
  <img src="https://images.unsplash.com/photo-1667892063532-2a39a634acef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA0NTE3MDg&ixlib=rb-4.0.3&q=80&w=400">
  <h2>Image without <code>alt</code></h2>
  <p>I should have a red border because my image is missing <code>alt</code> text.</p>
</div>

<div class="post">
  <img src="https://images.unsplash.com/photo-1667892063532-2a39a634acef?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzA0NTE3MDg&ixlib=rb-4.0.3&q=80&w=400" alt="A rollercoaster train of passengers cruising over a loop.">
  <h2>Image with <code>alt</code></h2>
  <p>I should have no red border because my image has <code>alt</code> text.</p>
</div>

@layer base;

.post:has(img:not([alt])) {
  border: 3px solid red;
}

@layer base {
  body {
    display: flex;
    flex-flow: row wrap;
    gap: 1rem;
    padding: 1rem;
  }
  .post {
    flex: 1;
  }
  img {
    max-width: 100%;
  }
}