Странное поведение псевдокласса :nth-child

Question

[Николай Васильчук]

Наглядный пример

Код

<div class="content">
    <ul class="list">
        <li>1</li>
        <li>2</li>
    </ul>
    <div class="node">node-1</div>
    <div class="node">node-2</div>
    <div class="node">node-3</div>
    <div class="node">node-4</div>
    <div class="node">node-5</div>
    <div class="node">node-6</div>
    <div class="node">node-7</div>
</div>​

.content .node {
    background: gray;
}
.content .node:nth-child(odd) {
    background: red;
}

Проблема в том, что :nth-child(odd) выделяет четные элементы. Если удалить список и оставить только div.node, всё начинает работать как надо. Такое чувство, что сначала выбираются нечетные элементы, потом они фильтруются по классу и уже к ним применяются стили.
Можно ли как-нибудь сделать, чтобы сначала выбирались элементы по классу, потом среди них находились нечетные?

Answer 1

[Makito]

Это обычное поведение, дело в том, что навешивая стили на псевдокласс, вы указываете как его стилизовать, но это не указывает на порядок следования элементов — для .content первым и соответственно нечетным элементом всегда будет ul.
Попробуйте написать таблицу и пропишите стили к первой строке путем tr:first-child, а затем заверните содержимое в тег tbody — вы удивитесь, но стили не применятся, так как для table первым элементом идет не tr а tbody

Comments

[Makito]

таким образом элемент всегда берет все свое содержимое, рассчитывает его порядок, и только затем применяет стили к элементам, для которых они прописаны

[Павел Тысляцкий]

Поэтому наверное лучше все нужные .node элементы класть в контейнер, где больше не будет других элементов, или же учитывать постоянное количество элементов перед .node классами.

Данная проблема есть в таком фреймворке как SenchaTouch 2 в списках, но вся прелесть в том, что очередность цветов в списках через :nth-child менялась там рандомно (в зависимости от запуска или платформы/браузера) и поэтому пришлось для каждого элемента добавлять свой стиль через класс .odd, благо элементы добавлялись через js.

[Николай Васильчук]

Непонятно, почему именно так. Если я указываю .node:nth-child, я ожидаю, что работаю с элементами .node. В общем, неожиданное какое-то поведение.

[Makito]

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

[Николай Васильчук]

Не совсем так. :nth-child(odd).node ведь тоже не работает :)

[Makito]

Не путайте внутренние правила разбора стилей браузером и правильный синтаксис css

[Николай Васильчук]

Это понятно. Смайл в конце намекает.
Спасибо за развернутый ответ.

Answer 2

[freeek]

А не подходит вам вариант завернуть всё в див ещё один, скажем, вот так:

<div class="content">
    <ul class="list">
        <li>1</li>
        <li>2</li>
    </ul>
    <div class="nodes">
    <div class="node">node-1</div>
    <div class="node">node-2</div>
    <div class="node">node-3</div>
    <div class="node">node-4</div>
    <div class="node">node-5</div>
    <div class="node">node-6</div>
    <div class="node">node-7</div>
    </div>
</div>​

Ну и стили:

.nodes .node {
    background: gray;
}
.nodes .node:nth-child(odd) {
    background: red;
}

Comments

[Николай Васильчук]

Да тут вопрос скорее риторический. Интересно, это так задумано или я туплю.

[freeek]

Задумано, собственно Makito верно написал.

Answer 3

[trueClearThinker]

Вам нужен селектор :nth-of-type
Т.о. получится:

.content .node:nth-of-type(odd) {
    background: red;
}

Comments

[Павел Тысляцкий]

Это тоже не работает: при добавлении пустого дива перед .node меняет цвета .node элементов.

[TRUE_DI24]

Павел Тысляцкий, у меня работает!

.myclass li:nth-of-type(odd) {
        background: var(--root-color);
}