How to change the colour of the label of the checked radio button with only css-CodePudding

I want to change the colour of the label when that specific radio button is checked, but I am unable to do it, this is my code

html

<input  type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input  type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input  type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input  type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article >
    <ul >
        <li >
            <label for="arb" >Arbitration Cases</label>
        </li>
        <li >
            <label for="landacq" >Land Acquisation Cases</label>
        </li>
        <li >
            <label for="comcourt" >Comercial Court Cases</label>
        </li>
        <li >
            <label for="others" >Others</label>
        </li>
    </ul>
</article>

css

.civil-sub-law-type:checked ~ .civil-sub-law-type-label {
  background-color: red;
}

Please suggest me what should I do

CodePudding user response：

First, you have to account for each input-label pair specifically, typically by the assigned id.

Second, you have to use ~ * rather than just ~, since the labels are not sibling elements of the checkboxes, but descendants of such siblings.

#arb:checked ~ * label[for="arb"] {
  background-color: red;
}

#landacq:checked ~ * label[for="landacq"] {
  background-color: red;
}

#comcourt:checked ~ * label[for="comcourt"] {
  background-color: red;
}

#others:checked ~ * label[for="others"] {
  background-color: red;
}

<input  type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input  type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input  type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input  type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article >
    <ul >
        <li >
            <label for="arb" >Arbitration Cases</label>
        </li>
        <li >
            <label for="landacq" >Land Acquisation Cases</label>
        </li>
        <li >
            <label for="comcourt" >Comercial Court Cases</label>
        </li>
        <li >
            <label for="others" >Others</label>
        </li>
    </ul>
</article>

A bit different and more scalable method, counting the elements rather than using the ids. Also grouped the selectors together since they all use the same color.

.civil-sub-law-type:nth-child(1):checked ~ 
    * .civil-sub-law-type-list:nth-child(1) > label,
.civil-sub-law-type:nth-child(2):checked ~ 
    * .civil-sub-law-type-list:nth-child(2) > label,
.civil-sub-law-type:nth-child(3):checked ~ 
    * .civil-sub-law-type-list:nth-child(3) > label,
.civil-sub-law-type:nth-child(4):checked ~ 
    * .civil-sub-law-type-list:nth-child(4) > label {
  background-color: red;
}

<input  type="radio" name="civil-sublaw" id="arb" value="arbitration">
<input  type="radio" name="civil-sublaw" id="landacq" value="land acquisation">
<input  type="radio" name="civil-sublaw" id="comcourt" value="comercial court">
<input  type="radio" name="civil-sublaw" id="others" value="others">
<!-- SUB LAW TYPE -->
<article >
    <ul >
        <li >
            <label for="arb" >Arbitration Cases</label>
        </li>
        <li >
            <label for="landacq" >Land Acquisation Cases</label>
        </li>
        <li >
            <label for="comcourt" >Comercial Court Cases</label>
        </li>
        <li >
            <label for="others" >Others</label>
        </li>
    </ul>
</article>

CodePudding user response：

Your label and the input should be adjacent

.radio:checked   label {
  color: red;
}

<ul>
  <li>
    <input  name="test" type="radio" />
    <label>
      Test Label
    </label>
  </li>
  <li>
    <input  name="test" type="radio" />
    <label>
      Test Label 2
    </label>
  </li>
</ul>