<main class="max-w-6xl mx-auto my-8 pb-4 pl-4 border-l-8 border-l-teal-600">
  <h2 class="text-2xl font-medium text-amber-800">Advanced</h2>
  <h1 class="mb-1 text-4xl font-light text-teal-800">CSS :has() - Parent</h1>
  <p class="font-medium">Here are some example uses of the CSS :has() pseudo-class to style the parent element.</p>
  
 <h3 class="my-4 text-xl text-amber-600">Any Decendant</h3>
  <div class="flex flex-wrap gap-4">
    
    <div class="parent-1">
      Plane Parent Element (nothing fancy)
    </div>
    
    <div class="parent-1">
      Parent Element with a fancy direct descendant (child).
      <span class="fancy">This is the fancy element</span>
    </div>
        
    <span class="parent-1">
      Parent Element with fancy non-direct descendant
      <span>Outer Descendant - 
        <span class="fancy">Inner Fancy</span>
      </span>
    </span>
  </div>
      
  
 <h3 class="my-4 text-xl text-amber-600">Direct vs Indirect Decendants</h3>
  <div class="flex flex-wrap gap-4">
    
    <div class="parent-2">
      Plane Parent Element (nothing fancy)
    </div>
    
    <div class="parent-2">
      Parent Element with a fancy direct descendant (child).
      <span class="fancy">This is the fancy element</span>
    </div>
    <div class="parent-2">
      <span>Parent Element with a fancy direct descendant (child).</span>
      <span class="fancy">This is the fancy element</span>
    </div>
    <span class="parent-2">
      Parent Element with fancy non-direct descendant
      <span>Outer Descendant - 
        <span class="fancy">Inner Fancy</span>
      </span>
    </span>
  </div>
  
  <h3 class="my-4 text-xl text-amber-600">Empty vs No Descendants</h3>
  <div class="flex flex-wrap gap-4">
    
    <div class="parent-3">
      <span>With <code>span</code> element child</span>
    </div>
    <div class="parent-3">
      With text-node child
    </div>
    <div class="parent-3"></div>
    <div class="parent-3">
    </div>
    <div class="parent-3">
      <span>Has empty element</span>
      <span></span>
    </div>
  </div>
</main>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
html, body {
  font-family: "Lato", sans-serif;
  font-size: 20px;
}

.parent-1, .parent-2, .parent-3 {
  position: relative;
  max-width: 250px;
  min-width: 250px;
  padding: 1rem;
  border-radius: 0.5rem;
  background: gray;
  
  span {
    display: block;
  }
}

.parent-1:has(.fancy) {
  background: cornflowerblue;
}

.parent-2:has(> .fancy) {
  background: cornflowerblue;
}

.parent-3:not(:has(*)) {
  background: cornflowerblue;
  &::after {
    content: 'no elements';
    position: absolute;
    bottom: 0; right: 0.5rem;
    color: crimson;
    opacity: 0.7;
  }
}

.parent-3:empty {
  background: pink;
  &::after {
    content: 'empty box';
    position: absolute;
    bottom: 0; right: 0.5rem;
    color: crimson;
    opacity: 0.5;
  }
}

.parent-3:has(*:empty) {
  background: lime;
}