Css sibling (~) selector doesn't work with checked property
css, html
Solution
#slide1:checked ~ #broadControl label:nth-child(1)
The `~` operator only works on elements AFTER the element. In this case, `#slide1` searches for `#broadControl` label elements AFTER `#slide1`, it cannot search before it.
Example Fiddle: http://jsfiddle.net/9vxYJ/
You will see in that fiddle that i moved your `#broadcast` portion to AFTER the `broadcast controls`.
the other issue is that `~` is a sibling selector, which means it can only find elements on the same level. But you can work around this, since `#broadcast` IS on the same level as `#slide1` etc., you can bury into `#inner`, like so:
#slide1:checked ~ #broadcast > #overflow > #inner { margin-left: 0;}
#slide2:checked ~ #broadcast > #overflow > #inner { margin-left: -800px;}
#slide3:checked ~ #broadcast > #overflow > #inner { margin-left: -1600px;}
Problem
Why doesn't my css below work for me? Can anyone advise me please. ``` #slide1:checked ~ #inner { margin-left: 0;} #slide2:checked ~ #inner { margin-left: -800px;} #slide3:checked ~ #inner { margin-left: -1600px;} ``` The css below does work. I don't know where to go from here. ``` #slide1:checked ~ #broadControl label:nth-child(1), #slide2:checked ~ #broadControl label:nth-child(2), #slide3:checked ~ #broadControl label:nth-child(3){ background: #333; border-color: #333; !important; } ``` HTML: ``` <div id="broadcast"> <div id="overflow"> <div id="inner"> <article> <div class="info"></div> <div id="pic1"></div> <!--img src=""--> </article> <article> <div class="info"></div> <div id="pic2"></div> <!--img src=""--> </article> <article> <div class="info"></div> <div id="pic3"></div> <!--img src=""--> </article> </div> </div> </div> <!-- Broadcast controls --> <input checked type="radio" name="slider" id="slide1"> <input type="radio" name="slider" id="slide2"> <input type="radio" name="slider" id="slide3"> <div id="broadControl"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> ``` I'm trying to make a slide transition with pure CSS to understand more in CSS. But I've been stuck here for 3 days now. I have no idea why it doesn't work. If you have any ideas, please suggest them to me. Thanks in advance.