Pure CSS Tabs without javascript and anchor support

tab.html

<!-- Features:
     * Tabs with anchor (browser history support)
     * Tab anchor can be used to scroll or not
     * Color selected tab menu
     * Select the first tab by default (and also color its tab menu)
     * Uses a simple unordered list

     Helpful links:
     https://stackoverflow.com/questions/6906724/is-it-possible-to-have-tabs-without-javascript
     https://www.sitepoint.com/css3-tabs-using-target-selector/
     https://stackoverflow.com/questions/43978381/keep-selected-tab-highlighted-in-menu-using-css
-->
<a href="#cat">Show cat</a>
<a href="#dog">Show dog</a>
<a href="#cow">Show cow</a>

<article id="tabs">
  <!-- NOTE: This list of IDs MUST be placed BEFORE the tab-sections!
             The order here is important too!
             The ids and anchors MUST be the first element RIGHT AFTER then "tabs" id.-->
  <div id="show-cat" class="tab-id"></div>
  <div id="show-dog" class="tab-id"></div>
  <div id="show-cow" class="tab-id"></div>
  <div id="cat" class="tab-anchor"></div>
  <div id="dog" class="tab-anchor"></div>
  <div id="cow" class="tab-anchor"></div>

  <ul class="tab-menu">
    <li class="tab-item"><a href="#show-cat">Cat</a></li>
    <li class="tab-item"><a href="#show-dog">Dog</a></li>
    <li class="tab-item"><a href="#show-cow">Cow</a></li>
  </ul>

  <div class="tab-folder">
    <p class="tab-content">This content appears on tab 1.</p>
    <p class="tab-content">This content appears on tab 2.</p>
    <p class="tab-content">This content appears on tab 3.</p>
  </div>
</article> 

tab.scss

#tabs {
  // NOTE: If you set the div elements to display none,
  // the browser will not jump to that anchor after clicking a tab.    
  .tab-id {
    display: none;
  }
  // Alternative, used when scrolling to tab is desired
  .tab-anchor {    
    scroll-margin-top: 7rem;
    scroll-snap-margin-top: 7rem; /* Safari and IOS */
  }

  // By default, all tab contents should be hidden
  .tab-folder>.tab-content {
    display: none;
  }

  // If no tab is selected, chose the first tab
  .tab-id:nth-child(1):not(:target) + .tab-id:nth-child(2):not(:target) + .tab-id:nth-child(3):not(:target) + .tab-anchor:nth-child(3n + 1):not(:target) + .tab-anchor:nth-child(3n + 2):not(:target) + .tab-anchor:nth-child(3n + 3):not(:target) ~ .tab-folder>.tab-content:nth-child(1) {
    display: block;
  }

  // Show tab content, whenever its corresponding ID is referenced.
  .tab-id:nth-child(1):target ~ .tab-folder>.tab-content:nth-child(1),
  .tab-anchor:nth-child(3n + 1):target ~ .tab-folder>.tab-content:nth-child(1) {
    display:block;
  }
  .tab-id:nth-child(2):target ~ .tab-folder>.tab-content:nth-child(2),
  .tab-anchor:nth-child(3n + 2):target ~ .tab-folder>.tab-content:nth-child(2) {
    display:block;
  }
  .tab-id:nth-child(3):target ~ .tab-folder>.tab-content:nth-child(3),
  .tab-anchor:nth-child(3n + 3):target ~ .tab-folder>.tab-content:nth-child(3) {
    display:block;
  }

  // NOTE: This can be merged with the entry below, style the default tab always the same. But you can (optionally) style the unselected tab menu differently.
  .tab-id:nth-child(1):not(:target) + .tab-id:nth-child(2):not(:target) + .tab-id:nth-child(3):not(:target) + .tab-anchor:nth-child(3n + 1):not(:target) + .tab-anchor:nth-child(3n + 2):not(:target) + .tab-anchor:nth-child(3n + 3):not(:target) ~ .tab-menu>.tab-item:nth-child(1) {
    a {
      color:green;
    }
  }

  // Color the tab, that is currently referenced to.
  .tab-id:nth-child(1):target ~ .tab-menu>.tab-item:nth-child(1),
  .tab-anchor:nth-child(3n + 1):target ~ .tab-menu>.tab-item:nth-child(1) {
    a {
      color:red;
    }
  }
  .tab-id:nth-child(2):target ~ .tab-menu>.tab-item:nth-child(2),
  .tab-anchor:nth-child(3n + 2):target ~ .tab-menu>.tab-item:nth-child(2) {
    a {
      color:red;
    }
  }
  .tab-id:nth-child(3):target ~ .tab-menu>.tab-item:nth-child(3),
  .tab-anchor:nth-child(3n + 3):target ~ .tab-menu>.tab-item:nth-child(3) {
    a {
      color:red;
    }
  }
}