Выберите div после того же элемента уровня - PullRequest
Новая
       2

Выберите div после того же элемента уровня

0 голосов
/ 02 марта 2020

Как выбрать один элемент после указанного c элемента? Например, 

<div class="general">
    <div class="inner">Foo 1</div>
    <div class="inner">Foo 2</div>
    <div class="inner">Foo 3</div>
    <div class="header">Bar</div>
    <div class="inner">Foo 4</div>
    <div class="inner">Foo 5</div>
    <div class="inner">Foo 6</div>
    <div class="inner">Foo 7</div>
    <div class="inner">Foo ...</div>
    <div class="inner">Foo n</div>
</div>

Как выбрать 4 div.inner после .header без выбора первых трех div.inner?

К вашему сведению, я не могу изменить любой HTML, Я могу изменить только CSS.

РЕДАКТИРОВАТЬ Я не сделал правильный вопрос. Мне просто нужны все элементы .inner после .header пропуска первых элементов n ('n' может измениться в будущем).

EDIT Цель состоит в том, чтобы стилизовать "Foo 7 "до" Foo n ", включительно.

Ответы [ 3 ]

2 голосов
/ 02 марта 2020

используйте общий селектор брата ~, так как он будет совпадать только в том случае, если потом родится брат.

.header ~ .inner { }

1 голос
/ 02 марта 2020

Это лучший способ получить то, что вы ищете. Надеюсь, я правильно понял 

.header ~ .inner

демонстрационная ссылка

1 голос
/ 02 марта 2020

Хорошо, теперь, когда вопрос был отредактирован еще раз, снова делая мой предыдущий ответ неправильным, я снова меняю свой ответ, чтобы он соответствовал вопросу:

Вы можете использовать несколько + селекторов «сосчитать» до первого родного брата, что должен быть затронут, а затем добавить селектор ~ после этого, чтобы выбрать всех следующих братьев и сестер с тем же классом: 

.header + .inner + .inner  + .inner ~.inner {
color: red;
}
<div class="general">
<div class="inner">Foo 1</div>
    <div class="inner">Foo 2</div>
    <div class="inner">Foo 3</div>
    <div class="header">Bar</div>
    <div class="inner">Foo 4</div>
    <div class="inner">Foo 5</div>
    <div class="inner">Foo 6</div>
    <div class="inner">Foo 7</div>
    <div class="inner">Foo ...</div>
    <div class="inner">Foo ...</div>
    <div class="inner">Foo ...</div>
    <div class="inner">Foo n</div>
</div>
...