CSS tab system stops working when changing quantity

Question

I’m trying to use a system of tabs in pure CSS. It seemed very nice, but when I add new tabs or remove some it stops working, someone knows to tell me why?

Only with 3 tabs works well:

.tabs input[type='radio'] { 
    display:none 
}
.tabs label {
    width:100px; 
    text-align:center; 
    padding: 20px;
    color:#666666; 
    display:inline-block;
    cursor:pointer;
}
.tab-content { 
    display:none; 
    background-color:#F3F3F3; 
    border-top:6px #FE7B43 solid;  
    text-align:center; 
    padding:50px 0; 
    position:relative; 
}
#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }

 <div class="tabs" id="tabs-1">
                
                <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
                <input id="tab-1-2" name="tabs-group-1" type="radio" />
                <input id="tab-1-3" name="tabs-group-1" type="radio" />

                <label for="tab-1-1">ABA 1</label>
                <label for="tab-1-2">ABA 2</label>
                <label for="tab-1-3">ABA 3</label>

                <!-- Aba 1 -->
                <div class="tab-content">
                    asdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdf
                </div>

                <!-- Aba 2 -->
                <div class="tab-content">
                    CONTEUDO ABA 2
                </div>

                <!-- Aba 3 -->
                <div class="tab-content">
                    CONTEUDO ABA 3
                </div>

            </div>

Answer 1

The architecture of this CSS is not the best at the time of maintenance, because it depends on the amount of intermediate elements for each tab. If generating dynamically, with a server-side language all right, but to update manually, need to be well "whole" of the operation.

First of all, see working with 4 tabs:

.tabs input[type='radio'] { 
    display:none 
}
.tabs label {
    width:100px; 
    text-align:center; 
    padding: 20px;
    color:#666666; 
    display:inline-block;
    cursor:pointer;
}
.tab-content { 
    display:none; 
    background-color:#F3F3F3; 
    border-top:6px #FE7B43 solid;  
    text-align:center; 
    padding:50px 0; 
    position:relative; 
}
#tabs-1 :checked + * + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + * + * + .tab-content { display: block }

<div class="tabs" id="tabs-1">
                
                <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
                <input id="tab-1-2" name="tabs-group-1" type="radio" />
                <input id="tab-1-3" name="tabs-group-1" type="radio" />
                <input id="tab-1-4" name="tabs-group-1" type="radio" />

                <label for="tab-1-1">ABA 1</label>
                <label for="tab-1-2">ABA 2</label>
                <label for="tab-1-3">ABA 3</label>
                <label for="tab-1-4">ABA 4</label>

                <!-- Aba 1 -->
                <div class="tab-content">
                    asdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdfasdasdasdasdasd<br><br>dfasdfsadfasdf
                </div>

                <!-- Aba 2 -->
                <div class="tab-content">
                    CONTEUDO ABA 2
                </div>

                <!-- Aba 3 -->
                <div class="tab-content">
                    CONTEUDO ABA 3
                </div>

                <!-- Aba 4 -->
                <div class="tab-content">
                    CONTEUDO ABA 4
                </div>

            </div>

To work, these lines have been adjusted

#tabs-1 :checked + * + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + * + * + .tab-content { display: block }

A + * the most in the first line, for each tab, and two in the second line.

A more scalable solution would be to place checkboxes before each tab, and use the selector + absolute

Refactoring to function independent of the number of tabs

The technique is the same, but I re-ordered the fields and CSS to each radiobutton be always at the same distance from your respective tab and its contents. To increase or decrease the number of tabs, simply replicate the radio + label + div.

The only care is to make all the tabs fit on the same line.

.tabs input[type='radio'] { 
    display:none;
    position:absolute;
    left:-100px;
}
.tabs label {
    width:60px; 
    text-align:center; 
    padding: 20px;
    color:#666666; 
    display:inline-block;
    cursor:pointer;
}
.tab-content { 
    display:none; 
    position:absolute;
    left:0;
    width:100%;
    background-color:#F3F3F3; 
    border-top:6px #FE7B43 solid;  
    text-align:center; 
    padding:50px 0; 
}
#tabs-1 {position:relative}
#tabs-1 :checked + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + label + .tab-content { display: block }

<div class="tabs" id="tabs-1">
  <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
  <label for="tab-1-1">ABA 1</label>
  <div class="tab-content">
    CONTEUDO ABA 1
  </div>

  <input id="tab-1-2" name="tabs-group-1" type="radio" />
  <label for="tab-1-2">ABA 2</label>
  <div class="tab-content">
    CONTEUDO ABA 2
  </div>

  <input id="tab-1-3" name="tabs-group-1" type="radio" />
  <label for="tab-1-3">ABA 3</label>
  <div class="tab-content">
    CONTEUDO ABA 3
  </div>

  <input id="tab-1-4" name="tabs-group-1" type="radio" />
  <label for="tab-1-4">ABA 4</label>
  <div class="tab-content">
    CONTEUDO ABA 4
  </div>

  <input id="tab-1-5" name="tabs-group-1" type="radio" />
  <label for="tab-1-5">ABA 5</label>
  <div class="tab-content">
    CONTEUDO ABA 5
  </div>
</div>

Answer 2

Each time you add more tabs, you will need to increase the number of * + in the CSS in part:

#tabs-1 :checked + * + * + * + label {
  background-color: #FE7B43;
  color: #FFF;
}

#tabs-1 :checked + * + * +  * + * + * + * + * + .tab-content {
  display: block
}

.tabs input[type='radio'] {
  display: none
}
.tabs label {
  width: 100px;
  text-align: center;
  padding: 20px;
  color: #666666;
  display: inline-block;
  cursor: pointer;
}
.tab-content {
  display: none;
  background-color: #F3F3F3;
  border-top: 6px #FE7B43 solid;
  text-align: center;
  padding: 50px 0;
  position: relative;
}
#tabs-1 :checked + * + * + * + label {
  background-color: #FE7B43;
  color: #FFF;
}
#tabs-1 :checked + * + * +  * + * + * + * + * + .tab-content {
  display: block
}

<div class="tabs" id="tabs-1">
  <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
  <input id="tab-1-2" name="tabs-group-1" type="radio" />
  <input id="tab-1-3" name="tabs-group-1" type="radio" />
  <input id="tab-1-4" name="tabs-group-1" type="radio" />
  <label for="tab-1-1">ABA 1</label>
  <label for="tab-1-2">ABA 2</label>
  <label for="tab-1-3">ABA 3</label>
  <label for="tab-1-4">ABA 4</label>
  <!-- Aba 1 -->
  <div class="tab-content">
    CONTEUDO ABA 1
  </div>
  <!-- Aba 2 -->
  <div class="tab-content">
    CONTEUDO ABA 2
  </div>
  <!-- Aba 3 -->
  <div class="tab-content">
    CONTEUDO ABA 3
  </div>
  <!-- Aba 4 -->
  <div class="tab-content">
    CONTEUDO ABA 4
  </div>
</div>