Problem z tyldą ( ~ )

Witam :)

Po zaznaczeniu input,

<div>
    <input type="radio" name="radio-set" id="control-1"/><br />
</div>
<section>
	<div class="pages"></div>
</section>

section .pages
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}

#control-1:checked ~ section .pages
{
width:300px;
}

no bo w tym przypadku section nie jest rodzeństwem inputa tylko diva
musiałbyś znaleźć rodzica inputa i dopiero szukać jego rodzeństwa, ale potrzebny do tego selektor tematu "!" pojawi się dopiero w CSS4 którego specyfikacja nawet nie jest jeszcze gotowa
ogólnie lepiej chyba tego typu rzeczy zostawić javascriptowi bo takie hardcodowane łażenie po drzewie DOM nie wygląda zbyt fajnie

jeśli nie javascript to proponuję postawienie inputa w kodzie zaraz obok diva i rozpozycjonowanie go poprzez position:relative