Подтвердить что ты не робот

: селектор nth-child (четный/нечетный) с классом

Я пытаюсь применить нечетные/четные селектора ко всем элементам в списке с родителем класса.

HTML:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

enter image description here

Ссылка на jsFiddle

Но цвета сбрасываются. Я хочу, чтобы элементы списка были цветом текста.

Есть ли способ сделать это?

4b9b3361

ОТВЕТЫ

Ответ 1

В общем, то, что вы хотите, невозможно, но есть способ добиться желаемого поведения для ограниченного числа "исключенных" элементов: общий синонимов-комбайнов ~.

Идея заключается в том, что для каждого вхождения элемента .parent последующие элементы .parent будут иметь свои цвета:

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

Посмотрите на действие.

Конечно, есть предел тому, как далеко можно было бы принять это, но это как можно ближе к чистому CSS.

Ответ 2

Это распространенное неправильное восприятие

Селекторы :nth-child и :nth-of-type не рассматривают "класс" или что-то еще для подсчета. Они рассматривают только (1) все элементы или (2) все элементы определенного "типа" (не класса, не атрибута, ничего, кроме типа элемента - div или li и т.д.).

Таким образом, вы не можете пропустить его с помощью чистого CSS, не зная своей точной структуры html (а затем, только если на самом деле есть несколько элементов, с которыми вы имеете дело - см. Jon ответ на один такой способ, где вам нужно знать сколько не-родительских элементов вы имеете в виду, и, как вы можете видеть, и он отмечает, что практические ограничения очень малы) или с помощью javascript.

Ответ 3

Это возможно только с CSS Selectors 4, который будет nth-match.

В существующем CSS это можно сделать только в некоторых ограниченных ситуациях, используя общий многократный умножитель рассылки, например, в ответ @Jon или даже более "механический" способ (пример):

.parent,
.parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: green;
}

.parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: red;
}

На практике мне кажется лучше использовать JS/jQuery для этого.

Ответ 4

CSS

Другим надежным способом репликации в настоящее время является смежный селектор:

.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }

У вас есть три варианта:

  • Используйте селектор not(). Это будет держать ваше выделение на неопределенный срок, но будет иногда переворачивать порядок, который он выделяет в. Используйте этот параметр, если в вашем списке могут быть огромные группы элементов, которые вы хотите выделить.
  • Используйте селектор + (смежный сиблинг). Этот параметр не будет постоянно выделять неопределенно, но он гарантирует, что заказ никогда не будет перевернут. Используйте этот параметр, если ваш список будет иметь меньшие группировки выделенных элементов вместе.
  • Используйте селектор ~ (любой сиблинг). Я бы не рекомендовал это, так как список не будет правильно подсвечиваться, основываясь на общей длине списка, а не на общих совпадениях братьев и сестер. Это всегда будет работать до двух других вариантов и, что более заметно.

Заклинание здесь: http://jsfiddle.net/corymcd/kVcZJ/

Не стесняйтесь скопировать HTML из этого и вставить его в те, которые другие люди продемонстрировали своими методами.

JQuery

Как указано выше, использование чего-то вроде jQuery легко позволит вам либо назначить ваши элементы четным/нечетным классам, либо просто изменить встроенный стиль.

// Find all objects to highlight, remove all of the highlighting classes, 
// and then re-highlight.
$(".parent").removeClass('odd even').each(function(index) {
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});

Заклинание здесь: http://jsfiddle.net/corymcd/kAPvX