radio button (checkbox hack)

耗尽温柔 提交于 2019-12-02 10:15:43

What you are doing

You are using a general sibling ~ selector. Find more information about it here:

http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/

Why it doesn't work

input[type="radio"]:checked ~ .reveal-if-active-skillsAll works for a DOM structure where .reveal-if-active-skillsAll is a sibling of your radiobutton. There is no way to make it work if .reveal-if-active-skillsAll has a parent element different from your radio button's parent element.

A small warning: Possible unintended side effects

Also, please be aware that ~ .reveal-if-active-skillsAll will select all sibling .reveal-if-active-skillsAll, not only the next.

To select only the next, use the adjacent sibling selector +. This requires your .reveal-if-active-skillsAll to follow directly after your radio button in the markup.

http://www.sitepoint.com/web-foundations/adjacent-sibling-selector-css-selector/

Learn to properly use markup according to the existing rules!

Please also note that the only direct child element that is allowed in an unordered list <ul> (as well as an ordered list <ol>) is <li>.

How to solve it - and avoid issues like this in the future

Don't just copy "hacks" which you do not understand - it will almost always have undesired consequences at some point which you will be unable to a) foresee and b) fix. So read this answer, read what can be found behind the links I posted, and understand what you are doing.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!