<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 <code>:has()</code></h1>
  <p class="font-medium">Here are some example uses of the CSS <code>:has()</code> pseudo-class.</p>
  <div class="max-w-xl my-4">
    
    <section>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam laudantium quod dolorum! Quam necessitatibus praesentium odio tempora, dolores quis laboriosam officia magni sapiente incidunt, ratione aspernatur vel aliquam porro? Dolore?</p>
    </section>
    <section>
      <heading>This is the heading</heading>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus blanditiis rerum animi voluptates ullam tempora corporis, officia tenetur facere cum consequuntur architecto sit deleniti? Ratione beatae vitae porro asperiores alias.</p>
    </section>
    
    
    <div class="example-0 mb-4 p-4 border-2 border-slate-100 shadow">
      <span>A</span>
      <span>B</span>
      <span>C</span>
      <span>D</span>
      <span>E</span>
      <span>F</span>
    </div>
    
    <div class="example-1 mb-4 p-4 border-2 border-slate-100 flex gap-4 shadow">
      <div class="flex-1">
        <h1 class="text-2xl font-light">Lunch Menu</h1>
        <ul>
          <li>Grilled Chicken Salad</li>
          <li>Roadhouse Lamb Chili <span class="featured">*</span></li>
          <li>Apple Tunafish Sandwich</li>
          <li>Mustard Grilled Cheese Samich</li>
          <li>Tarragon Chicken Tartine <span class="featured">*</span></li>
          <li>Mom's PB&amp;J No Crust Sandwich</li>
          <li>Firecracker Tomato Soup</li>
          <div class="my-1 text-xs font-light">* featured item</div>
        </ul>
      </div>
      <div class="flex-1">
        <h1 class="text-2xl font-light">Dinner Menu</h1>
        <h2 class="text-sm font-semibold text-slate-300">Prix Fixe</h2>
        <ul>
          <li>Starter: Lemongrass Soup</li>
          <li>Salad: Table Side Ceasar</li>
          <li>Pasta: Lobster Ravioli <span class="featured">*</span></li>
          <li>Break: Amuse Bouche</li>
          <li>Entrée: Grilled Alaskan Salmon</li>
          <li>Finishing: Apple Crisp <span class="featured">*</span></li>
        </ul>
        <div class="my-1 text-xs font-light">* featured item</div>
      </div>
    </div>
    
    <div class="font-semibold text-xs">Interactive (try clicking)</div>
    <div class="example-2 mb-4 p-4 border-2 border-rose-50 [&:has(:checked)]:bg-rose-300/50">
      <label class="[&:has(:checked)]:font-semibold text-rose-500">
        <input type="checkbox" class="appearance-none line-block w-4 h-4 border-2 border-rose-500 checked:bg-rose-700 rounded outline-none" />
        Format your drive?
      </label>
    </div>

    <div class="font-semibold text-xs">Interactive (try clicking)</div>
    <div class="example-3 mb-4 p-4 border-2 border-teal-100 flex items-center gap-4">
      <label class="inline-flex items-center gap-1 p-2 rounded [&:has(:checked)]:bg-slate-300">
        <input type="radio" name="options" value="one" class="appearance-none border-2 border-slate-200 w-4 h-4 rounded checked:bg-slate-500" />
        One
      </label>
      <label class="inline-flex items-center gap-1 p-2 rounded [&:has(:checked)]:bg-slate-300">
        <input type="radio" name="options" value="two" class="appearance-none border-2 border-slate-200 w-4 h-4 rounded checked:bg-slate-500" />
        Two
      </label>
      <label class="inline-flex items-center gap-1 p-2 rounded [&:has(:checked)]:bg-slate-300">
        <input type="radio" name="options" value="three" class="appearance-none border-2 border-slate-200 w-4 h-4 rounded checked:bg-slate-500" />
        Three
      </label>
    </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;
}

section {
  margin: 1rem 0;
}
section:has(heading) {
  padding: 0.7rem;
  border: solid 1px gray;
  border-radius: 0.5rem;
  background: rgba(0,0,255, 0.1);
  
  heading {
    font-weight: bold;
    color: rgba(0,0,255, .7);
  }
}

.example-0 { 
  //HACK to remove the white space created between the spans
  //The spans are on separate lines resulting in white space from the CR/LF 
  font-size: 0; 
  span { 
    font-size: 1rem;
    padding: .5rem;
    border: 2px solid #999999;
  }
  span:has(+ span) { border-right: none; }
}

.example-1 {  
  h1 { margin-bottom: 1rem; }
  h2 { margin-bottom: 1rem; }  
  //-- no margin if there is a sibling h2 --//
  h1:has(+ h2) { margin-bottom: 0rem; }
  //-- not to be confused by... //
  h1 + h2 { font-style: italic; }
  
  //-- highlight featured items --//
  li:has(.featured) { background-color: #ffff0066; }
}

.example-2 {
  //-- uses TAILWIND :has() selector
}
.example-3 {
  //-- uses TAILWIND :has() selector
}