Как при помощи CSS обратиться к родителю тэга?

Question

Допустим, есть код:
HTML:

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

CSS:

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

Теперь вопрос:
Как мне писать стили для тэга label, в input[type="radio"]:checked{} ? То есть, я хочу присвоить родительскому тэгу label определенные стили при нажатии на <input type = "radio">.

score 0 · Answer 1 · answered Oct 12 '18 at 20:25

0

При помощи CSS ни как. Вот, почитай. DOM дерево работает в этом случае только вниз, к потомкам. Используй JS

answered Oct 12 '18 at 20:25

BlackStar1991

6,168

score 0 · Answer 2 · answered Oct 12 '18 at 20:47

На данный момент такой возможности, но обещают ввести в 4 версии has(), можно выбрать следующий за:

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>

score 0 · Answer 3 · answered Oct 12 '18 at 21:04

Напиши маленький скрипт, который будет добавлять или удалять класс. Например, вот так:

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

Как при помощи CSS обратиться к родителю тэга?

3 Answers3