Выбрать элемент после элемента с определенным дочерним элементом
Рассмотрим этот HTML:
<p>Foo</p>
<p>
<br>
</p>
<p>Bar</p> <!-- I want to select this p element -->
<p>Baz</p>
Есть ли способ в CSS выбрать «элемент p после элемента p, содержащего элемент br»?
Я знаю, что могу вернуться к использованию JavaScript для этого, но мне было любопытно посмотреть, есть ли какая-то забавная комбинация родственных селекторов или какой-то магический псевдокласс, с которым я еще не столкнулся.
он по-прежнему называется родительский селектор ... вы хотите посмотреть, что находится внутри вашего элемента, поэтому вам нужно сначала спуститься, а затем снова подняться, что на самом деле невозможно с CSS (прочтите дубликат, и вы обнаружите, что вам нужен Селектор :has()) ... в основном вы хотите этого: начните с br, проверьте, является ли родительский элемент p, если да, селектор, затем выберите p после него .. что то же самое, что: выберите p, который содержит br, затем выберите p после этого
Ага. Думаю, я бы больше искал, если бы я пропустил что-то вроде :blank, которое решило бы эту проблему, но тогда я думаю, что это вернулось к JS.
Если вам интересно, вот глубокое погружение в то, как родительские селекторы играют в этом и однонаправленность селекторов, несмотря на то, что может показаться.
Ответы 1
В этом коде
`
Фу
Бар
Баз
`Если вы хотите выбрать 3-й p, вы можете использовать псевдокласс: nth-child ()
Так что ответ будет p:nth-child(3)
Если эти теги p находятся внутри контейнера, используйте это как комбинатор для желаемого результата, иначе он выберет все 3-е теги p в html-документе.
NB: Конечно, родительский селектор может работать, но не совсем то, о чем я спрашиваю. Родительские селекторы немного противоречат сути CSS, который всегда действует только в одном направлении вниз по DOM. В моем случае элемент, над которым я хочу действовать, все еще остается после всех остальных вещей, о которых мне нужно знать, поэтому не было бы необходимости возвращаться к DOM или выполнять второй проход и т. д.