Определите стили для элементов непосредственно перед и после другого элемента CSS

Question

Я искал последний час, чтобы найти правильный CSS-селектор (или, по крайней мере, чтобы выяснить, существует ли он) для стилизации элементов в DOM непосредственно перед и после другого элемента.

На данный момент у меня есть ul, чьи li элементы имеют свойство border-bottom. Я хотел бы изменить цвет этой границы, если сразу после него в DOM есть элемент. Если возможно, я бы хотел не использовать для этого отдельные классы.

Рассмотрим следующую разметку:

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li class="divider">2</li>
    <li>List Item 4</li>
    <li>etc.</li>
</ul>

Я хотел бы добавить border-bottom: none к <li>List Item 3</li> и любым другим li элементам, за которыми сразу следует li.divider.

Есть ли для этого селектор CSS, что-то вроде ul > li, но для этого? Он не должен быть кросс-браузерным и может быть CSS3; просто нужно работать в браузерах WebKit ...

Answer 1

это невозможно. нет селектора css для предыдущих элементов; ни предшествующие братья и сестры, ни предки.

однако вы можете применить стиль к следующему (и только следующему) брату:

li.divider + li {border:1px solid black}

Вы можете зацепить это. этот стиль:

li.predivider {border-bottom: none} /*before*/
li.predivider + li {border:1px solid black} /*divider*/
li.predivider + li + li {border-bottom: none} /*after*/

и это (комбинируемый):

li.divider {border:1px solid black} /*divider*/
li.divider + li {border-bottom: none} /*after*/

позволяет применять только один из классов «predivider» или «divider», в зависимости от того, является ли разделитель первым элементом (и, следовательно, не имеет ни одного перед ним) или нет.

Answer 2

.divider + li, чтобы выбрать для иммиграции родного брата <li> до .divider.

Что касается предыдущего, я не думаю, что это возможно (пожалуйста, поправьте меня, если я ошибаюсь)