0

I am trying to make slider on CSS without JS. I found example on codepen and tried to change it, and found out the the functuality depends on the position of elements in .html. I tried to change selectors, but it didn't work out. Why?

html

<body>
    <div class="container">
        
        <input type="radio" id="trigger1" name="slider" checked autofocus>
        <label for="trigger1" class="label1"></label>
        <div class="slide bg1"></div>

        <input type="radio" id="trigger2" name="slider">
        <label for="trigger2" class="label2"></label>
        <div class="slide bg2"></div>

        <input type="radio" id="trigger3" name="slider">
        <label for="trigger3" class="label3"></label>
        <div class="slide bg3"></div>

        <input type="radio" id="trigger4" name="slider">
        <label for="trigger4" class="label4"></label>
        <div class="slide bg4"></div>

    </div>
    <style>
    /*this works*/
    input:checked+label {
        background-color: white;
    }
    /*these don't*/
    input#trigger1:checked label.trigger1 {
        background-color: white;
    }
    
    input#trigger2:checked label.trigger2 {
        background-color: white;
    }
    
    input#trigger3:checked label.trigger3 {
        background-color: white;
    }
    
    input#trigger4:checked label.trigger4 {
        background-color: white;
    }
    </style>
</body>
Danyil Derkach
  • 1
  • `I tried to change selectors, but it didn't work out.` ... what did you do? ... how did it fail? – jsotola May 15 '22 at 17:36
  • @jsotola look at the – Danyil Derkach May 15 '22 at 17:41
  • Just add **+** selector and remove white space between checked and label and remove every class after label tag selector. – NooberBoy May 15 '22 at 18:36

0 Answers0