Suppose there is a code:
HTML:

<label><input type = "radio"></label>

CSS:

 input[type="radio"] { visibility: hidden; } input[type="radio"]:checked{ }

Now the question is:
How do I write styles for the label tag in input[type="radio"]:checked{} ? That is, I want to assign certain styles to the parent label tag when I click on <input type = "radio"> .

    3 answers 3

    With CSS, neither. Here, read it . The DOM tree works in this case only down to the descendants. Use js

      At the moment, this possibility, but promise to introduce in version 4 of has (), you can choose the following:

       input[type="radio"]:checked+label { background-color: yellow; color: blue; } label { padding: .5em } 
       <input type="radio" id="test" name="radio"/> <label for="test">Test label</label> <input type="radio" id="test2" name="radio"/> <label for="test2">Test label2</label>

        Write a small script that will add or delete a class. For example, like this:

         $('input[type=radio]').click(function(){ $(this).parent().tooggleClass('checked'); })