Объединение псевдоклассов CSS nth-child и not [duplicate]

У меня есть таблица, и я хочу затенить каждую альтернативную строку, кроме строки с классом "openingTimes".

Эта строка времени открывания не должна быть заштрихована, но узор после этой строки должен быть продолжен, вот так (с жирным шрифтом, представляющим затенение!):

[ Информация 1 ] [ Информация 2 ] [ Строка времени открытия ] [ Информация 3 ] [ Информация 4 ] [ Информация 5 ] [ Информация 6 ]

CSS у меня есть:

table tr:not(.openingTimes):nth-child(even)
{
    background-color: #eeeeee;
}

Но к чему это приводит:

[ Информация 1 ] [ Информация 2 ] [ Строка времени открытия ] [ Информация 3 ] [ Информация 4 ] [ Информация 5 ] [ Информация 6 ]

Я хочу, чтобы Info 3 был затенен, а рисунок продолжался оттуда.

Что я делаю неправильно? Спасибо!

Редактировать: Хорошо, вот скрипт: http://jsfiddle.net/QWjnm/


css css-selectors pseudo-class
person Fiona - myaccessible.website    schedule 10.02.2014    source источник
comment
JSfiddle... вы знаете, как это сделать.   -  person Paulie_D    schedule 10.02.2014
comment
Почему бы просто не добавить класс к каждой из строк (исключая .openingTimes), а затем применить nth-child() к этому классу?   -  person Austin Brunkhorst    schedule 10.02.2014
comment
nth-child не работает с братьями и сестрами с разными классами, по крайней мере, не так, как вы думаете.   -  person Paulie_D    schedule 10.02.2014
comment
ОК, добавлено jsfiddle.net/QWjnm   -  person Fiona - myaccessible.website    schedule 10.02.2014
comment
@AustinBrunkhorst Я мог бы сделать да, я просто пытаюсь прояснить поведение этого селектора, поскольку результаты меня удивили :)   -  person Fiona - myaccessible.website    schedule 10.02.2014
comment
На самом деле @AustinBrunkhorst, это тоже не работает - похоже, он просто полностью игнорирует селектор класса: jsfiddle.net/U3fqA   -  person Fiona - myaccessible.website    schedule 10.02.2014
comment
Я считаю, что @AustinBrunkhorst хотел дать только те trs, которые вы хотите затенить другим классом. Как в этой скрипке. Я все же думаю, что мой работает лучше, хотя.   -  person Mr Lister    schedule 10.02.2014
comment
Для повторного взаимодействия селекторы nth НЕ работают только с элементами классов.   -  person Paulie_D    schedule 10.02.2014
comment
Да, я думаю, что решение @MrLister дает мне то, что я действительно хочу в этом случае, если вы добавите его в качестве ответа, я соглашусь :)   -  person Fiona - myaccessible.website    schedule 10.02.2014
comment
Подождите минуту. Глупый вопрос, но вам нужно затенять первую строку? В противном случае вы могли бы просто написать tr:nth-child(even), что просто пропустит открытиеTimes.   -  person Mr Lister    schedule 10.02.2014

Ответы (1)


arrow_upward
5
arrow_downward

Синтаксис nth-child недостаточно сложен, чтобы обеспечить то, что вы хотите.

Однако в вашем примере вы можете написать

tr:first-child, tr:nth-child(2n+4)

для селектора.

Это означает использование первого потомка, а также каждого четного потомка, начиная с четвертого.

См. обновленную скрипту.

Это не идеальное решение; у вас больше нет контроля над классом openingTimes, но я не могу придумать никакого решения, где вы это делаете. Прости!

person Mr Lister    schedule 10.02.2014
comment
каждый второй ребенок, начиная с четвертого. неверно, это любой второй четный дочерний элемент, начиная с четвертого. - person Apolo; 28.04.2015
comment
@Apolo Эй, каждый другой не значит то же самое, что и каждый. Поищи это. И я даже не уверен, что предложение грамматически правильное после вашего редактирования. - person Mr Lister; 28.04.2015
comment
Я просто хотел уточнить, но английский не мой любимый язык, отредактируйте, если считаете, что это неправильно. - person Apolo; 28.04.2015
comment
но каждый второй ребенок, начиная с четвертого, заставляет меня думать, что это 4, 5, 6 и так далее... - person Apolo; 28.04.2015
comment
@Apolo Но на самом деле это означает 4, 6, 8 и так далее. Я могу отредактировать, чтобы это было правильно и ясно... - person Mr Lister; 28.04.2015