<div>
  <h1>Hello World</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/c/cb/The_Blue_Marble_%28remastered%29.jpg" alt="Hello world!" style="width: 100px"/>
  <p>This is a test</p>
</div>
<div>
  <section>
    <p>A second div.</p>
  </section>
</div>
<div>
  <section> 
    <h2>A third div.</h2>
  </section>
  <h3>More information.</h3>
</div>
/* Parent selection using :has() */
div:has(img) {
  border: 2px solid green; 
  width: 20%;
}

/* Relational selection using :has() */

h1:has(+img) {
  color: limegreen;
}

/* Chaining :has() selectors */ 

div:has(>section):has(p) {
  background-color: seagreen;
  color: white;
  width: 20%;
  padding: 2px;
}

/* Parent selection via a direct child */ 

div:has(> p) {
  background-color: lightgreen;
}

/* Parent selection via a list of children */ 

div:has(h2, h3){
  color: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.