@selbi

Как правильно прописать :nth-child?

Всем привет! Уважаемые знатоки css, поделитесь пожалуйста опытом, как бы вы поступили в такой ситуации: в контейнере div есть много тегов p, и у некоторых из них есть класс, скажем .p, так вот надо как-то покрасить четные и нечетные элементы с классом .p разными цветами. Сейчас это выглядит так но как можете заметить, 0 и 4 элементы покрашены одним цветом. Иными словами, нужно как-то игнорировать элементы p без класса .p.

UPD: и можете объяснить, почему так происходит? Ведь задан селектор: div > .p:nth-child вроде как все остальное должно игнорироваться.
  • Вопрос задан
  • 864 просмотра
Решения вопроса 2
sharpfellow
@sharpfellow
Front
Обратимся к документации CSS.
Псевдокласс nth-child определяет состояние элемента по соседям слева (before), соседей может быть 0. Тип узла-элемента не играет роли (текстовые узлы игнорируются).
Поэтому 0 и 4 имеют один цвет, так как 0 получает красный, как первый в div, а 4й (он же пятый, если считать от 1цы) так же красный, так как в его случае nth-child учитывает 4х соседей слева.

Как сделать с помощью nth-child я не могу придумать)
Я бы сделал таким образом с помощью nth-of-type , который так же определяет по соседям слева, но учитывая тип первого узла, который получил этот класс. + обернул то, что надо пропустить в div.
В примере ниже у узлов один и тот же класс, но псевдокласс будет окрашивать их по типу
.test:nth-of-type(odd) {
  background-color: red;
}

<div> 
    <div class="test">div</div>
    <p class="test">p</p>
    <p class="test">p</p>
    <div class="test">div</div>
    <p class="test">p</p>
    <div class="test">div</div>
    <ul class="test">ul</ul>
    <div class="test">div</div>
</div>
Ответ написан
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Добрый день. Происходит так потому, что при использовании nth-child он смотрит на всех детей родительского контейнера. Добавив имя класса Вы лишь указываете что если ребёнок подходит под прогрессию(чётное) И одновременно с этим имеет указанный класс, то окрась. И таким образом получается, что 0 и 4 элементы рассматриваются как чётные, потому что в дереве документа так оно и есть. Если Вы добавите класс .p к p с номером 2 то увидите наглядно. Или же можете добавить ещё один элемент P без класса и тогда элемент 4 покрасится в зелёный потому что в дереве он станет не чётным.
Перепробовал через nth-child с комбинациями :not и :first-child и тоже что-то не придумалось особо.
Варианты решения:
1) Обработка на JS;
Делать выборку всех элементов с определённым классом и уже там их перекрашивать по чётности или не чётности, но в идеале добавлять модификатор, что-то вроде:
Найди все .p, к чётным добавь класс p_odd, к нечётным p_even
2) Выводить эти элементы изначально с другим классом-модификатором.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы