Pure CSS tabs using :has()

by Oski Krawczyk

HTML

<form id="tabs-container">
  <ul id="tabs">
    <li>
      <label>
        <input type="radio" name="tabs" checked>
        Tab 1
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="tabs">
        Tab 1
      </label>
    </li>
    <li>
      <label>
        <input type="radio" name="tabs">
        Tab 1
      </label>
    </li>
  </ul>
  
  <section id="tabs-content">
    <div class="content">
      1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias laudantium amet repellendus velit autem illum temporibus dolorum culpa placeat modi. Atque ad delectus ullam debitis quae accusantium repellendus, omnis labore?
    </div>
    <div class="content">
      2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias laudantium amet repellendus velit autem illum temporibus dolorum culpa placeat modi. Atque ad delectus ullam debitis quae accusantium repellendus, omnis labore?
    </div>
    <div class="content">
      3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias laudantium amet repellendus velit autem illum temporibus dolorum culpa placeat modi. Atque ad delectus ullam debitis quae accusantium repellendus, omnis labore?
    </div>
  </section>
</form>

CSS

/* The whole logic behind pure CSS tabs */

#tabs-container .content {
  display: none;
}

#tabs-container:has(li:nth-child(1) input:checked) .content:nth-child(1),
#tabs-container:has(li:nth-child(2) input:checked) .content:nth-child(2),
#tabs-container:has(li:nth-child(3) input:checked) .content:nth-child(3){
  display: block;
}

/* Below is just styling */

input[type="radio"]{
  position: absolute;
  left: -900em;
}

label {
  cursor: pointer;
}

#tabs li:has(input:checked){
  background: coral;
}