This question has already been answered:

Greetings. In the example, I used input type="radio" to select "show", "close" some block. How to make the active radio change the background, i.e. lightgreen changed to green , it turned out with red (the colors on the contrary are true, but it is not scary), because it is the next element, and green is obtained as the previous element, so how to choose the previous element to change the background while :checked ? Thank!

 body{z-index:10;positioin:relative;text-align:center;} input{display:none;}/*радио кнопки*/ label[for="radio-1"]{background:lightgreen;} label[for="radio-2"]{background:pink;} label{ cursor:pointer; border:1px solid #333; padding:5px; margin-top:20px; display:inline-block; } label:hover{opacity:0.6;} label:active{background:rgba(0,0,0,0.2);} .block{ width:600px; position:absolute; top:80px; left:28%; } #radio-1:checked ~ .block{display:block;} .block{display:none;} #radio-1:checked ~ label{background:red;} 
 <label class="green" for="radio-1">OPEN<sup>(chckd)</sup></label> <input type="radio" name="radio" id="radio-1" checked="checked"> <label class="red" for="radio-2">CLOSE</label> <input type="radio" name="radio" id="radio-2"> <!-- --> <!-- --> <div class="block"> <fieldset> <legend>HEADER</legend> <h1>TEXT-HEADER #1 <strong>...some text</strong></h1> </fieldset> </div>

Reported as a duplicate by participants ߊߚߤߘ , mymedia , ishidex2 , br3t , Andrey NOP 19 Oct '17 at 5:20 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • It is precisely in such a formulation that it is impossible - but there are cunning ways how to imitate such behavior. link (eng) , link - Alexander Belinsky
  • @Alexander Belinsky, I don’t think that it is right to close more specific questions as a duplicate of the question with the decision “impossible”. - Qwertiy ♦
  • The answer is updated. - Qwertiy ♦

2 answers 2

 input{display:none;}/*радио кнопки*/

The inputs themselves are still hidden, so you can put them anywhere in the markup. We must put them earlier and, possibly, above those elements that they should influence, and then use the following types of selectors:

 #chk-i:checked ~ .smth-i #chk-i:checked ~ .root .smth-i

In your case it turns out like this:

 input { display: none; } label{ cursor:pointer; border:1px solid #333; padding:5px; margin-top:20px; display:inline-block; } label:hover { opacity:0.6; } #radio-1:checked ~ label[for="radio-1"] { background: green; } #radio-2:checked ~ label[for="radio-2"] { background: red; } 
 <input type="radio" name="radio" id="radio-1" checked="checked"> <input type="radio" name="radio" id="radio-2"> <label class="green" for="radio-1">OPEN<sup>(chckd)</sup></label> <label class="red" for="radio-2">CLOSE</label>

PS: In css you cannot refer to an earlier element. So far the only exception is the pseudo :focus-within class :focus-within , but it will not lie to you

  • This is a great way, I don’t know why I didn’t guess myself ... thanks! - Victor Kas
  • "The inputs themselves are still hidden, so you can put them anywhere in the markup." I will correct, if you don’t put them anywhere, within the block where the label is located, otherwise the conditions will not work radio-1: checked ~ label [for = "radio -1 "] {background: green; } - Victor Kas
  • @VictorKas, you can put above the labels. The selector will change to radio-1:checked ~ * label[for="radio-1"] (although it is better to replace the asterisk with something more precise). - Qwertiy ♦
  • @VictorKas, what is such an example? - Qwertiy ♦
  • I deleted the post ... did not continue, write examples, etc.) is not convenient here - Victor Kas

For example, in this version, the condition will not work as long as the input is outside the label * block, yes, if such a condition is used

radio-1: checked ~ * label {background: red;} - works

 input{margin-bottom:20px;} label{ border:1px solid orange; padding:10px; } #radio-1:checked ~ label{background:red;} 
 <input type="radio" name="radio" id="radio-1"> <input type="radio" name="radio" id="radio-2"> <div> <label for="radio-1">radio-1</label> <label for="radio-2">radio-2</label> </div>