`+` (смежный селектор) и `>` (селектор непосредственного потомка) не работают вместе

#html #css #css_selectors

Почему не работает селектор:

.parent > .child + .parent > .child {
    ...
}


Сниппет:



.parent > .child + .parent > .child {
  color: green;
}

  
текст
  
текст (почему не зелёный?)





Чтобы заработало можно заменить на .parent > .child + .child, но вопрос именно в
том почему не работает исходная версия.
    

Ответы

Ответ 1

В CSS нет никаких группировок, селекторы просто интерпретируются последовательно
слева направо. Плюсик в вашем селекторе означает «следующий элемент после элемента
.parent > .child»



.parent > .child + .parent > .child {
  color: green;
}

  
Это .parent > .child
  
Это .parent > .child + .parent
    
Это .parent > .child + .parent > .child (зелёный!)