How to fill the background of the block if you select the checkbox?

Hello! Have this structure:
<div class="row">
 <div class="col-md-3">
 <div class="hideRadio">
 <img src="http://i013.radikal.ru/1606/23/77673ff2a869.png">
 <input type="radio" ng-model="typemat" value="bal1">
<p>Балкон1</p>
 </div> 
</div>
 <div class="col-md-3">
 <div class="hideRadio">
 <img src="http://i013.radikal.ru/1606/23/77673ff2a869.png">
 <input type="radio" ng-model="typemat" value="bal2">
 <p>Балкон2 </p>
</div>
</div>
 </div>


If you do so:
input[type=radio]:checked + p {
 color: #000;
 font-weight: bold; 
}

then select only the text in the tag . How can I paint a gray background div block with class hideRadio?
Maybe it is possible to prescribe means of Angular or how to do it in jQuery (add class when radio checked)
Thanks in advance.
July 8th 19 at 11:25
3 answers
July 8th 19 at 11:27
In CSS there is no selector of the parent/ancestor. Cm. stackoverflow.com/questions/1014861/is-there-a-css...

Only through JavaScript.
July 8th 19 at 11:29
July 8th 19 at 11:31
You can, for example,
add:
<-- check on the value of models of RadioButton.

https://jsfiddle.net/L4cLxp43/1/

Find more questions by tags CSSAngularHTML