Using input[type='checkbox']:checked selector

Question

I am trying to display or hide a paragraph in a html page. The html code is:

<input type="checkbox" id="show"> Show/Hide <p id="toggle">Lorem ipsum dolor sit amet</p> </div>

Then I use CSS3 to hide/show the paragraph:

 #toggle { display:none; } #show:checked ~ p { display: block; }

This does work. But if I try:

#toggle { display:none; } input[type='checkbox']:checked ~ p { display: block; }

this doesn't work anymore. I can't understand why. Is there any error in this selector?

 input[type='checkbox']:checked

Thanks for helping!!!

specificity issue ... use this instead #show:checked ~ p#toggle .. ID selector is more specific so the checked style never apply — Temani Afif
– Temani Afif, Commented Mar 14, 2018 at 8:22
Possible duplicate of How element selector is more specific than id selector? — Temani Afif
– Temani Afif, Commented Mar 14, 2018 at 8:25

GreyRoofPigeon · Accepted Answer · 2018-03-14 08:41:41Z

This has to do with the CSS specificity.
When looking at the specificity hierarchy , you'll see that id will go above the element.

That means that
#toggle is more specific then:
input[type='checkbox']:checked ~ p
and therefor will the id overrule the element selector.

So, use:

#toggle { display: none; } input[type='checkbox']:checked ~ p#toggle { display: block; }

<div> <input type="checkbox" id="show"> Show/Hide <p id="toggle">Lorem ipsum dolor sit amet</p> </div>

Or:

input[type='checkbox'] ~ p{ display: none; } input[type='checkbox']:checked ~ p { display: block; }

<div> <input type="checkbox" id="show"> Show/Hide <p id="toggle">Lorem ipsum dolor sit amet</p> </div>

you'll see that id will go above (pseudo)classes. ? it's about ID and element selector, pseudo class and classes has nothing to do here.

1 Answer 1