Порядок псевдоклассов CSS: nth-child и :not

У меня есть следующий код:

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Я выделил этот список серыми полосами:

.list li:nth-child(2n) {
    background-color: #ccc;
}

Отлично работает, но потом я скрываю некоторые из li элементов, и порядок полос нарушается. Скрипка

Я попытался обновить селектор с помощью :not():

.list li:not(.hidden):nth-child(2n) {
    background-color: #ccc;
}

Но это было бесполезно.

Может ли кто-нибудь посоветовать, как заказать псевдоклассы, чтобы сохранить порядок полос?


css css-selectors pseudo-class
person Evgeniy    schedule 11.06.2014    source источник
comment
Можете ли вы удалить эти элементы вместо того, чтобы скрывать? скрипка   -  person Mr_Green    schedule 11.06.2014
comment
:nth-child() не учитывает другие селекторы. Порядок детей не меняется при добавлении классов и т.д.   -  person BoltClock    schedule 11.06.2014
comment
@Mr_Green, нет, они мне понадобятся в будущем, скрытие временно.   -  person Evgeniy    schedule 11.06.2014
comment
@BoltClock У вас есть источники для этого?   -  person feeela    schedule 11.06.2014
comment
@feeela: Да, их много, но я не могу найти ни одного из них с помощью поиска по сайту, поймите. В спецификации это тоже не очень ясно. Однако я могу говорить авторитетно, когда говорю, что именно так это и работает. Может быть, я должен просто ответить на этот вопрос, несмотря на то, что это сотый дубликат.   -  person BoltClock    schedule 11.06.2014
comment
Возможные дубликаты: stackoverflow.com/ questions/22770593/, stackoverflow.com/questions/17458582/   -  person Ilya Streltsyn    schedule 11.06.2014
comment
@Илья Стрельцын: Спасибо. Для этой проблемы действительно нужен канонический вопрос, но поиск по сайту ни капли не помогает. Я не против написать ответ, но 1) мне нужно убедиться, что я еще не написал его, и 2) нам нужно найти хороший канонический вопрос, а не просто любой старый вопрос без ответа.   -  person BoltClock    schedule 11.06.2014
comment
@Илья Стрельцын: Наконец-то нашел: stackoverflow. com/questions/5545649/ Идите вперед и проголосуйте дважды по одной из ваших ссылок, и я добавлю это как второе и расширим свой существующий ответ.   -  person BoltClock    schedule 11.06.2014
comment
@BoltClock, что интересно, спецификация CSS Selecors 4 недавно изменилась, и теперь она предлагает :nth-child(... of selector) вместо :nth-match(... of selector). Однако на практике это ничего не меняет, насколько я знаю, поскольку ни один браузер не поддерживает ни один синтаксис.   -  person Ilya Streltsyn    schedule 11.06.2014
comment
@Ilya: Я думаю, что это обсуждение лучше разместить под одним из наших ответов - комментарии здесь становятся немного запутанными. Однако я не могу перенести комментарии.   -  person BoltClock    schedule 11.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я знаю, nth-child работает с позициями элементов или индексом. Таким образом, даже если вы скроете элемент, позиции/индексы других элементов не изменятся.

Я думаю, что вам лучше всего сделать это полностью с помощью jQuery, как я показал ниже в качестве примера:

$(function () {
    $('.list li:not(.hidden):odd').addClass('paint');
    $('.hide_some').click(function () {
        $('.list li').eq(0).addClass('hidden');
        $('.list li').eq(2).addClass('hidden');
        $('.list li').eq(5).addClass('hidden');
        // again remove the paint
        $('.list li').removeClass('paint');
        // again add new paint
        $('.list li:not(".hidden"):odd').addClass('paint');
    })
})

Рабочая скрипка

person Mr_Green    schedule 11.06.2014
comment
Да, спасибо, похоже, нет способов управлять этим с помощью простого CSS. - person Evgeniy; 11.06.2014