Why won't the Background color for radio button after checked not change?

I’ve searched around and checked various answers, but I’m having trouble with the following:
There are a couple caveats

1. Can’t use Javascript or Jquery.
2. has to be pure CSS.

I want the background color of the label to change from Blue to Orange after the input is selected. It does not seem to work and I’ve checked around and read several answers from people, but none of them have worked for me and I’m not sure what I’m doing wrong.

The CSS:

    .header-tabs-container {
        position: relative;
        float: center;
        left: 25%;
        clear: both;
        z-index: 2;
        border-collapse: collapse;
        white-space: normal;
        border: unset;
    }
    /* tabs names */
    .header-tabs-container .header-label {
        position: relative;
        padding: clamp(-1.5rem, -3.2rem + 8.8889vw, 3rem);
        font-size: clamp(0.95rem, -0.925rem + 8.333vw, 3rem);
        background-color: blue;
        color: #fff;
        cursor: pointer;
        user-select: none;
        text-align: center;
        z-index: 1;
        margin: 0px;
        border: white 1px solid;
        white-space: nowrap;
        border-radius: 40px 40px 0px 0px;
    }
    
    /* Hover effect on tabs names */
    .header-tabs-container .header-label:hover {
        background: orange;
        color: blue;
        transition: 0.2s;
    }
    
    /* Content area for tabs */
    .header-tab-content {
        position: relative;
        background: #eee;
        margin-top: -10px;
        width: 100%;
        min-height: 100vh;
        padding: 0px;
        float: left;
        box-sizing: border-box;
        z-index: 2;
        display: none;
        white-space: nowrap;
        border: 1px solid blue;
    }
    
    .header-tab-content:after {
        content: "";
        clear: both;
    }
    /* Hide input radio from users */
    input[name="header-tab"] {
        display: none;
    }
    /* Show tab when input checked */
    input[name="header-tab"]:checked + .header-tab-content {
        display: block;
        transition: 0.5s ease-out;
    }
    
    input[name="header-tab"]::after + .header-label {
        background-color: orange;
    }

The HTML

    <section class="header-tabs-container">
        <label class="header-label" for="header-tab1">Tab1</label><!--
            --><label class="header-label" for="header-tab2">Tab2</label>
      </section>
    
      <input name="header-tab" id="header-tab1" type="radio" checked/>
      <section class="header-tab-content">
        <h3>Test</h3>
           Content 
        </section>
    
      <input name="header-tab" id="header-tab2" type="radio" />
      <section class="header-tab-content">
          <h3> test</h3>
          content
        </section>
    
    </section>

Basically everything works as expected… Except I cannot, for the life of me, get the following to work at all.

    input[name="header-tab"]:checked + header-label {
    background-color: orange;
    }

Any ideas or advice would be greatly appreciated.

Thank you in advance.

>Solution :

In CSS you cannot select previous siblings, therefore you’ll need move input above your tabs and use ~ for sibling selections for the content:

.header-tabs-container {
        position: relative;
        float: center;
/*            left: 25%;*/
        clear: both;
        z-index: 2;
        border-collapse: collapse;
        white-space: normal;
        border: unset;
    }
    /* tabs names */
    .header-tabs-container .header-label {
        position: relative;
        padding: clamp(-1.5rem, -3.2rem + 8.8889vw, 3rem);
        font-size: clamp(0.95rem, -0.925rem + 8.333vw, 3rem);
        background-color: blue;
        color: #fff;
        cursor: pointer;
        user-select: none;
        text-align: center;
        z-index: 1;
        margin: 0px;
        border: white 1px solid;
        white-space: nowrap;
        border-radius: 40px 40px 0px 0px;
    }
    
    /* Hover effect on tabs names */
    .header-tabs-container .header-label:hover {
        background: orange;
        color: blue;
        transition: 0.2s;
    }
    
    /* Content area for tabs */
    .header-tab-content {
        position: relative;
        background: #eee;
        margin-top: -10px;
        width: 100%;
        min-height: 100vh;
        padding: 0px;
        float: left;
        box-sizing: border-box;
        z-index: 2;
        display: none;
        white-space: nowrap;
        border: 1px solid blue;
    }
    
    .header-tab-content:after {
        content: "";
        clear: both;
    }
    /* Hide input radio from users */
    input[name="header-tab"] {
        display: none;
    }
    /* Show tab when input checked */
    input[name="header-tab"]:nth-of-type(1):checked ~ .header-tab-content:nth-of-type(1),
    input[name="header-tab"]:nth-of-type(2):checked ~ .header-tab-content:nth-of-type(2) {
        display: block;
        transition: 0.5s ease-out;
    }
    
    input[name="header-tab"]:checked + .header-label {
        background-color: orange;
    }

<section class="header-tabs-container">
      <input name="header-tab" id="header-tab1" type="radio" checked/>
        <label class="header-label" for="header-tab1">Tab1</label>
      <input name="header-tab" id="header-tab2" type="radio" />
        <label class="header-label" for="header-tab2">Tab2</label>
    
      <section class="header-tab-content">
        <h3>Test</h3>
           Content 
        </section>
    
      <section class="header-tab-content">
          <h3> test</h3>
          content
        </section>
    
    </section>