<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>:has() demo</title>
</head>

<body>
  <div class="div1">
    <h1>Introvert people </h1>
    <p>Talks more with themselves</p>
  </div>
  <div class="div2">
    <h1>Extrovert people</h1>
    <h2>Talks more with others</h2>
  </div>
</body>

</html>
body {
  display: flex;
  column-gap: 100px;
}

div1,
div2 {
  display: flex;
  flex-direction: column;
}

h1:has(+ p) {
  background: red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.