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 >
        <label  for="header-tab1">Tab1</label><!--
            --><label  for="header-tab2">Tab2</label>
      </section>
    
      <input name="header-tab" id="header-tab1" type="radio" checked/>
      <section >
        <h3>Test</h3>
           Content 
        </section>
    
      <input name="header-tab" id="header-tab2" type="radio" />
      <section >
          <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.

CodePudding user response：

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 >
      <input name="header-tab" id="header-tab1" type="radio" checked/>
        <label  for="header-tab1">Tab1</label>
      <input name="header-tab" id="header-tab2" type="radio" />
        <label  for="header-tab2">Tab2</label>
    
      <section >
        <h3>Test</h3>
           Content 
        </section>
    
      <section >
          <h3> test</h3>
          content
        </section>
    
    </section>

CodePudding user response：

The combinator matches the second element only if it immediately follows the first element. CSS_Selectors

Move the labels and inputs inside the same section and then try ~ or . input must be first.