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

Question

[Selbi]

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

UPD: и можете объяснить, почему так происходит? Ведь задан селектор: div > .p:nth-child вроде как все остальное должно игнорироваться.

Comments

[zoozag]

div > .p:nth-child(odd) - работает следующим образом:
Стиль будет применен к элементу если он div > .p и .p является нечетным элементом в дереве родителя
Я думал, что сработает :nth-of-type, но он работает немного не так, как я думал раньше

[Selbi]

zoozag, Да, похоже что так и работает, но све же это странно и надо как-то найти способ обойти эту фичу? или особенность )

[zoozag]

selbi, Говорят в css4 будет :nth-match, а пока только на js видимо решать

[Selbi]

zoozag, через js уже была идея, но проблема в том, что все это происходит в блоке с contenteditable, то есть редактируется, добавляется, удаляется и т.д.. в конечном счете сохраняется, так что при каждом изменении видимо придется подкрашивать как надо и перед сохранением очищать от лишних атрибутов style, печалька (

[Ankhena]

selbi, на js добавлять класс

[Selbi]

Ankhena, да, точно, спасибо за подсказку

Answer 1

[Кирилл Матросов]

Обратимся к документации 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>

Comments

[Selbi]

Да уж, теперь разобралась как работает nth-child. Предложенный Вами вариант разумеется рабочий, но как уже писала выше - все это происходит в блоке с contenteditable, то есть через редактор tinymce, поэтому там по дефолту используются именно теги p, можно конечно подхимичить и сработает, но просто думала может есть решение на css, но видимо без js никак ) спасибо за ответ.

Answer 2

[Вадим]

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

Comments

[Selbi]

Спасибо! Только js остается, второй вариант увы не подходит

[Вадим]

selbi, Добился желаемого результата только css`ом

.p:nth-last-child(2n):not(:first-child){
  background-color:red
}
.p:nth-last-child(2n+1):not(:first-child){
  background-color:green
}
.p:first-child{
  background-color:red 
}

Но как я прочёл выше, речь идёт об contenteditele элементах, и в таким случае, этот вариант будет корректно отображаться только в двух случаях:
1) Элемент с номером 1 - не редактируемый.
2) Элементы будут сохранять свой класс как в начальной разметке, потому что, например, если с элемента с цифрой 5 удалить класс, то получится два зелёных подряд