Почему ~ работает как +?

Question

[xottdog]

Почему то в моем коде при обращении к классу с ~, при чекнутом радиобаттоне, он обращается к нему, только если тот стоит сразу после радиобаттона, если меджу ними стоит какой-нибудь див или еще что, то уже не работает. Но как я понимаю он ведь должен искать и обащатся в следующему .news, независимо от того что между ними. Это ведь с + так должен себя вести, или я что-то не правильно понимаю.

Конкретнее:
Вот так работает:

HTML:

<input type="radio" name="newsradio" id="news1"  checked>
<div class="news"></div>

CSS:

#news1:checked ~ .news {
	color:yellow;
}

А вот так не работает:

HTML:

<input type="radio" name="newsradio" id="news1"  checked>
<div class="box">
        <div class="news"></div>
</div>

CSS:

#news1:checked ~ .news {
	color:yellow;
}

Похоже понял, ~ получается не работает с дочерними дивами, ведь у меня .news дочерний див .box???

Comments

[Евгений Вольф]

Отформатируйте код пожалуйста, не совсем понятно где какой тег закрывается, т.к. некоторые части тегов "скушало".

[Артем Каюн]

Вы сами ответили на свой вопрос. ~ слектор ищет на одном уровне вложенности.

Answer 1

[Ivanq]

И ~, и + ищут по уровню вложенности.

<a>
    <b></b>
</a>
<c></c>

a ~ c {} /* находит */
b ~ c {} /* не находит */

Еще раз, ищет не как "следующие потом в HTML", а "следующие потом UPD сестринские элементы".

+ ищет как ~, но только соседние:

<a></a>
<b></b>
<c></c>

a + b {} /* работает */
b + c {} /* работает */
a + c {} /* не работает */

Comments

[Сергей delphinpro]

>> не знаю как лучше назвать
сестринские ноды. причем только последующие. "+" - по сути является частным случаем "~"