Вкладки с CSS только с использованием идентификатора флажка должны быть включены в идентификатор цели

Question

Я хотел бы добиться некоторой CSS функциональности вкладок. У меня есть следующий код (часть):

array.map((name,index) => (
  '<input type="radio" 
     name="tabset" 
     id="tab'+index+'" 
   checked>
   <label for="tab'+index+'" class="tab-name">name</label>')) + 
  '<div class="tab-panels">' +
     array.map((name,index) => (
       '<div class="tab-panels">' +
       '<section id="tab'+index+'-content" class="tab-panel">text</section></div>'));

Теперь я статически в css что-то вроде этого

.tab-panel {
  display: none;
}

.tabset > #tab0:checked ~ .tab-panels > #tab0-content.tab-panel,
.tabset > #tab1:checked ~ .tab-panels > #tab1-content.tab-panel,
.tabset > #tab2:checked ~ .tab-panels > #tab2-content.tab-panel,
.tabset > #tab3:checked ~ .tab-panels > #tab3-content.tab-panel,
.tabset > #tab4:checked ~ .tab-panels > #tab4-content.tab-panel,
.tabset > #tab5:checked ~ .tab-panels > #tab5-content.tab-panel,
.tabset > #tab6:checked ~ .tab-panels > #tab6-content.tab-panel,
.tabset > #tab7:checked ~ .tab-panels > #tab7-content.tab-panel,
.tabset > #tab8:checked ~ .tab-panels > #tab8-content.tab-panel,
.tabset > #tab9:checked ~ .tab-panels > #tab9-content.tab-panel,
.tabset > #tab10:checked ~ .tab-panels > #tab10-content.tab-panel,
.tabset > #tab11:checked ~ .tab-panels > #tab11-content.tab-panel,
.tabset > #tab12:checked ~ .tab-panels > #tab12-content.tab-panel,
.tabset > #tab13:checked ~ .tab-panels > #tab13-content.tab-panel,
.tabset > #tab14:checked ~ .tab-panels > #tab14-content.tab-panel,
.tabset > #tab15:checked ~ .tab-panels > #tab15-content.tab-panel,
.tabset > #tab16:checked ~ .tab-panels > #tab16-content.tab-panel,
.tabset > #tab17:checked ~ .tab-panels > #tab17-content.tab-panel,
.tabset > #tab18:checked ~ .tab-panels > #tab18-content.tab-panel,
.tabset > #tab19:checked ~ .tab-panels > #tab19-content.tab-panel,
.tabset > #tab20:checked ~ .tab-panels > #tab20-content.tab-panel {
  display: block;
}

Здесь ясно, что он будет работать в соответствии с определениями CSS (до 20)

Нет ли случайно CSS для этого? как

.tabset > #tab$:checked ~ .tab-panels > #tab$-content.tab-panel {

спасибо

Answer 1

Если вы измените макет вашего html, вы можете присвоить входу класс и упростить ваш css, чтобы он использовал только одну строку.

Переместите ваш радиовход так, чтобы он находился непосредственно перед панелью. показывает (он не должен быть выше меток), тогда вы можете использовать соседний братский комбинатор :

.tab-panel,
.tab-input {
  display: none;
}

.tab-input:checked+.tab-panel {
  display: block;
}

<label for="tab1" class="tab-name">tab 1</label>
<label for="tab2" class="tab-name">tab 2</label>
<label for="tab3" class="tab-name">tab 3</label>
<div class="tab-panels">
  <input type="radio" name="panel-toggle" class="tab-input" id="tab1" checked>
  <div class="tab-panel">tab 1</div>
  <input type="radio" name="panel-toggle" class="tab-input" id="tab2">
  <div class="tab-panel">tab 2</div>
  <input type="radio" name="panel-toggle" class="tab-input" id="tab3">
  <div class="tab-panel">tab 3</div>
</div>