html - changed general-sibling combinator for toggling pseudo-element: what is valid -

i've hit mentioned webkit bug. following workaround seems work in specific instances. not succeeding in finding valid combinations.

starting (shortened. actual code has 9 child elements create carousel):

    input[value="1"]:checked ~ .container .carousel p:nth-child(1) { -webkit-transform: translatez(540px) scale(1); opacity: 1; } 

i've attempted syntax suggested in link

    input[value="1"]:checked + .container + .carousel p:nth-child(1) { -webkit-transform: translatez(540px) scale(1); opacity: 1; } 

however disables toggled action.

* update *
pointed out, did not specify problem.

the issue checkbox hack not working on android < 4.1 (as far can tell).
using chrome or safari (firefox not functioning code, , being rendered separately) the result of code can seen here

see jsfiddle example. worked me

input[value="1"]:checked + .container .carousel p:nth-child(1)      { -webkit-transform: translatez(540px) scale(1); opacity: 1; }