<h1>Tabs:target-within</h1>
<p>As of 2023, no browser supports ":target-within". Use ":has(:target)" instead.</p>
<div class="tabs">
  <ul class="tabs_list">
    <li class="tabs_list-item"><a href="#tabs_content-panel-1" class="tabs_link">Tab 1</a></li>
    <li class="tabs_list-item"><a href="#tabs_content-panel-2" class="tabs_link">Tab 2</a></li>
    <li class="tabs_list-item"><a href="#tabs_content-panel-3" class="tabs_link">Tab 3</a></li>
    <li class="tabs_list-item"><a href="#tabs_content-panel-4" class="tabs_link">Tab 4</a></li>
  </ul>
  <ul class="tabs_content">
    <li class="tabs_content-panel" id="tabs_content-panel-1">
      <p><a href="#Lorem" id="Lorem">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </li>
    <li class="tabs_content-panel" id="tabs_content-panel-2">
      <p><a href="#Ut" id="Ut">Ut</a> enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </li>
    <li class="tabs_content-panel" id="tabs_content-panel-3">
      <p><a href="#Duis" id="Duis">Duis</a> aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </li>
    <li class="tabs_content-panel" id="tabs_content-panel-4">
      <p><a href="#Excepteur" id="Excepteur">Excepteur</a> sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </li>
  </ul>
</div>

body {
  --canvas: #fff;
  --canvas-text: #202020;
  background: var(--canvas);
  color: var(--canvas-text);
}
.tabs {
  background: color-mix(in srgb, currentcolor 25%, transparent);
  border-radius: 0.25em;
  padding: 0.5em;
}
.tabs_list {
  display: flex;
  margin: 0;
  padding: 0;
}
.tabs_list-item {
  background: var(--canvas);
  display: block;
}
.tabs_link {
  color: inherit;
  display: block;
  outline: none;
  padding-block: 0.5em;
  padding-inline: 1em;
  text-decoration: none;
}
.tabs_content {
  background: var(--canvas);
  display: grid;
  margin: 0;
  padding: 1em;
}
.tabs_content-panel {
  display: block;
  grid-area: 1 / 1;
}
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):not(:has(.tabs_content-panel:target))) .tabs_list-item:where(:not(:nth-child(1))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):has(.tabs_content-panel[id$="-1"]:target)) .tabs_list-item:where(:not(:nth-child(1))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):has(.tabs_content-panel[id$="-2"]:target)) .tabs_list-item:where(:not(:nth-child(2))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):has(.tabs_content-panel[id$="-3"]:target)) .tabs_list-item:where(:not(:nth-child(3))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):has(.tabs_content-panel[id$="-4"]:target)) .tabs_list-item:where(:not(:nth-child(4))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):has(.tabs_content-panel[id$="-1"]:focus-within)) .tabs_list-item:where(:not(:nth-child(1))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):has(.tabs_content-panel[id$="-2"]:focus-within)) .tabs_list-item:where(:not(:nth-child(2))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):has(.tabs_content-panel[id$="-3"]:focus-within)) .tabs_list-item:where(:not(:nth-child(3))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):has(.tabs_content-panel[id$="-4"]:focus-within)) .tabs_list-item:where(:not(:nth-child(4))),
:where(.tabs:has(.tabs_link:focus-visible)) .tabs_list-item:where(:not(:focus-within)) {
  background: none;
}
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):not(:has(.tabs_content-panel:target))) .tabs_content-panel:where(:not(:nth-child(1))),
:where(.tabs:not(:has(.tabs_link:focus-visible)):not(:has(.tabs_content-panel:focus-within)):has(.tabs_content-panel:target)) .tabs_content-panel:where(:not(:target)),
:where(.tabs:not(:has(.tabs_link:focus-visible)):has(.tabs_content-panel:focus-within)) .tabs_content-panel:where(:not(:focus-within)),
:where(.tabs:has(.tabs_link[href$="-1"]:focus-visible)) .tabs_content-panel:where(:not(:nth-child(1))),
:where(.tabs:has(.tabs_link[href$="-2"]:focus-visible)) .tabs_content-panel:where(:not(:nth-child(2))),
:where(.tabs:has(.tabs_link[href$="-3"]:focus-visible)) .tabs_content-panel:where(:not(:nth-child(3))),
:where(.tabs:has(.tabs_link[href$="-4"]:focus-visible)) .tabs_content-panel:where(:not(:nth-child(4))) {
  clip-path: inset(50%);
  position: absolute;
}