Невозможно правильно ссылаться на дочерние элементы div

Question

Я пытаюсь применить CSS к элементам дочернего div с помощью различных селекторов «combinator», но ни один из них, похоже, не работает. Код РАБОТЫ: here

Для целей моей страницы я хочу поместить переключатели в свой собственный div, чтобы я мог использовать их как отдельное меню.

Однако я не могу заставить CSS получить доступ к символам элемента, когда я помещаю это меню в свой собственный div.

#original:checked ~.characters [data-teams~="original"] h2, 
#force:checked ~ .characters [data-teams~="force"] h2, 
#factor:checked ~ .characters [data-teams~="factor"] h2, 
#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 { 
display: block; 
} 

Как вы можете видеть, ЭЛЕМЕНТ "персонажей обращаются с помощью тильды (~) комбинатор, который хорошо работает, когда ЭЛЕМЕНТ" персонажей в той же DIV, как радио-кнопки.

После помещения переключателей в свой собственный div, я пробовал другие аксессоры для элемента «символы» (<, + и т. Д.), Но ничто не может получить доступ к этому элементу.

Какая правильная разметка для использования в этом случае?

EDIT: неработающий код here

Answer 1

Вы можете только доступ сибсы элемента с помощью ~ и +. Вот почему они называются комбинаторами-братьями - ключ к названию ...

Вы не можете ссылаться на «вверх» в DOM с помощью CSS - но вам нужно будет сделать это, чтобы выполнить то, что вы хотите, поскольку из элемент ввода, который вам нужно будет «перейти» в div сначала, прежде чем вы сможете выбрать другие элементы на том же уровне, что и этот div.

Что вы можете сделать, однако, оставить поля input на уровне, необходимом для выбора своих братьев и сестер, - и переместите элементы label где-нибудь еще. Этикетки запускают переключатель состояний радиоэлементов при щелчке, но для этого им не нужна конкретная структура DOM, поскольку их атрибут for обеспечивает необходимое соединение между вводом и меткой.

Тогда вам все еще нужно изменить код для форматирования этикетки в соответствии с выбранной радио-кнопки немного - но что-то, как это будет работать: http://codepen.io/anon/pen/PqRKWm

полей ввода были перенесены до меток, которые в настоящее время сгруппированные в div - это делает форматирование следующего содержимого на основе :checked. Состояние переключателей все еще работает одинаково.

Чтобы отформатировать ярлыки на основе выбранного переключателя, вам нужно сначала перейти в «div», а затем выбрать элемент метки для правой кнопки радиосвязи - это требует дублирования этих селекторов, так что у вас есть один для каждого входного маркированной комбинации:

input#original:focus ~ div label[for=original], 
input#force:focus ~ div label[for=force], 
input#factor:focus ~ div label[for=factor], 
input#hellfire:focus ~ div label[for=hellfire]{ 
    outline: 1px solid #fff; 
} 

input#original:checked ~ div label[for=original]::before, 
input#force:checked ~ div label[for=force]::before, 
input#factor:checked ~ div label[for=factor]::before, 
input#hellfire:checked ~ div label[for=hellfire]::before { 
    background-color: #c00; 
} 

конечно, вы можете использовать более конкретный селектор в этой точке, целевой метки в пределах данного конкретного сНу элемента только (с использованием дополнительного идентификатора или класс в селекторе).