HTML & CSS trouble with css selectors combining

[MercuryRising]

This code:
[CODE lang="css" title="Old CSS" highlight="1"].cl1 clChk:checked ~ cl2 {
opacity: 1;
height: auto;
}[/CODE]

worked perfectly fine with this structure:
[CODE lang="html" title="old html" highlight="2,3"]<div class="cl1">
<label class="clLabel" for="chk_1"></label>
<input class="clChk" type="checkbox" id="chk_1">

<article class="cl2">
..some text..
</article>
</div>[/CODE]

But i do not know how to change the css for this html structure to get the same result:
[CODE lang="html" title="New Html" highlight="2"]<div class="cl1">
<label class="clLabel"><input class="clChk" type="checkbox"></label>

<article class="cl2">
..some text..
</article>
</div[/CODE]

I have tried many variations, but i cannot seem to get it to work; so if the checkbox isn't nested in the label, there is no issue, but i need the checkbox nested in the <label>.

Thank you so much for your help!

 

[Mutiny]

I think the problem is that the ~ selector selects from siblings of the selector. When the label, input and article are all on the same level, they are siblings, but with the input inside of the label it is no longer a sibling to article.

You could put the article inside of the label, that might work. It's not really a good thing to do though because the label would apply to the whole article.

What if you made some Javascript that listened for the click on the checkbox and added a class to the article to make it visible?

 

[MercuryRising]

Thank you for responding.

There is noway to do this with pure css?, because i cannot use javascript on this page, that's prohibited unfortunately.

I can do:

.cl1 clLabel ~ cl2 {

, but then i am missing if the checkbox is indeed checked or not (and all the article text is always shown, since it's always true.
Is there a way to compound it? to have the statement as written just above here , but then on the next something like :

clChk:checked {

}

?
(i tried like this it doesn't work, but it has to be possible somehow right? with pseudo selectors or something?

 

[BGB]

I don't think it is possible with just css.

 

[MercuryRising]

That's too bad. thank you for replying, both of you. maybe need to wait for CSS4

 

[abhiweb_admec]

Heres's a solution to the given problem for you need to target the changes with help of id and use pseudo-class to trigger the change like so

[CODE lang="css" title="CSS styling"]#chk_1:checked + .cl2 {
opacity: 1;
}
.cl2 {
opacity: 0;
}[/CODE]

[CODE lang="html" title="HTML"]<div class="cl1">
<label for="chk_1" class="clLabel"></label>
<input id="chk_1" type="checkbox" />

<article class="cl2">
..some text..
</article>
</div>[/CODE]

Learn more about selectors

 

[MercuryRising]

Heres's a solution to the given problem for you need to target the changes with help of id and use pseudo-class to trigger the change like so

[CODE lang="css" title="CSS styling"]#chk_1:checked + .cl2 {
opacity: 1;
}
.cl2 {
opacity: 0;
}[/CODE]

[CODE lang="html" title="HTML"]<div class="cl1">
<label for="chk_1" class="clLabel"></label>
<input id="chk_1" type="checkbox" />

<article class="cl2">
..some text..
</article>
</div>[/CODE]

Learn more about selectors

Thank you, but I specifically cannot use the id structure, which is why i am in need of a solution with the nested check boxes; else the old html and css are enough...