Css sibling (~) selector doesn't work with checked property

Question

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.

Answer 1

#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;}