Как выбрать первый, второй или третий элемент с заданным именем classа?

Как я могу выбрать определенный элемент в списке элементов? У меня есть следующее:

my text1

stuff

more stuff

Hello World

my text2

stuff

Hello World

my text3

stuff

The end

У меня есть class CSS div.myclass {doing things} который применим ко всем, очевидно, но я также хотел иметь возможность выбрать первый, второй или третий class classа .myclass как это, независимо от того, где они находятся разметка :

 div.myclass:first {color:#000;} div.myclass:second {color:#FFF;} div.myclass:third {color:#006;} 

Почти как индекс индекса jQuery .eq( index ) , который я использую в настоящее время, но мне нужна альтернатива без сценария.

Чтобы быть конкретным, я ищу псевдоселекторы, а не такие вещи, как добавление другого classа или использование идентификаторов, чтобы все работало.

Вероятно, вы, наконец, поняли это между публикацией этого вопроса и сегодня, но сама природа селекторов не позволяет перемещаться по иерархически не связанным элементам HTML.

Или, проще говоря, поскольку вы сказали в своем комментарии, что

нет однородных родительских контейнеров

… это просто невозможно с селекторами, без изменения разметки в некотором роде, как показано другими ответами.

Вы должны использовать решение jQuery .eq() .

использовать nth-child (номер позиции) EX

 
my text1
some other code+containers...
my text2
some other code+containers...
my text3
some other code+containers...
.parent_class:nth-child(1) { }; .parent_class:nth-child(2) { }; .parent_class:nth-child(3) { };

ИЛИ

: nth-of-type (номер позиции), тот же код

 .myclass:nth-of-type(1) { }; .myclass:nth-of-type(2) { }; .myclass:nth-of-type(3) { }; 

Да, ты можешь это сделать. Например, чтобы создать tags td, которые составляют разные столбцы таблицы, вы можете сделать что-то вроде этого:

 table.myClass tr > td:first-child /* First column */ { /* some style here */ } table.myClass tr > td:first-child+td /* Second column */ { /* some style here */ } table.myClass tr > td:first-child+td+td /* Third column */ { /* some style here */ } 

Это не столько ответ, сколько неответ, т. Е. Пример, показывающий, почему один из высоко проголосовавших ответов на самом деле ошибочен.

Я думал, что ответ выглядит хорошо. Фактически, это дало мне то, что я искал :nth-of-type который для моей ситуации работал. (Итак, спасибо за это, @Bdwey.)

Сначала я прочитал комментарий @BoltClock (в котором говорится, что ответ по существу неправильный) и отклонил его, поскольку я проверил свой вариант использования, и он сработал. Затем я понял, что @BoltClock имеет репутацию 300 000+ (!) И имеет профиль, в котором он утверждает, что является гуру CSS. «Хм, – подумал я, – может быть, мне стоит подойти немного ближе.

Выключается следующим образом: div.myclass:nth-of-type(2) НЕ означает «второй экземпляр div.myclass». Скорее, это означает «второй экземпляр div, и он должен также иметь class« myclass »». Это важное различие, когда между вашими экземплярами div.myclass есть промежуточные div .

Мне потребовалось некоторое время, чтобы обдумать это. Поэтому, чтобы помочь другим понять это быстрее, я написал пример, который, как я считаю, более четко демонстрирует концепцию, чем письменное описание: я захватил элементы h1 , h2 , h3 и h4 по существу, div . Я поместил class A на некоторые из них, сгруппировал их в 3, а затем покрасил 1, 2 и 3 экземпляры синим, оранжевым и зеленым, используя h?.A:nth-of-type(?) . (Но, если вы внимательно читаете, вы должны спрашивать «1-й, 2-й и 3-й случаи чего?»). Я также включил неодинаковый (то есть другой h уровень) или аналогичный (т.е. тот же самый уровень h ) неclassифицированный элемент в некоторые из групп.

Обратите внимание, в частности, на последнюю группу из 3. Здесь h3.A элемент h3 вставлен между первым и вторым элементами h3.A В этом случае не появляется 2-й цвет (то есть оранжевый), а 3-й цвет (т.е. зеленый) отображается во втором экземпляре h3.A Это показывает, что n в h3.A:nth-of-type(n) подсчитывает h3 s, а не h3.A s.

Ну, надеюсь, что это поможет. И спасибо, @BoltClock.

 div { margin-bottom: 2em; border: red solid 1px; background-color: lightyellow; } h1, h2, h3, h4 { font-size: 12pt; margin: 5px; } h1.A:nth-of-type(1), h2.A:nth-of-type(1), h3.A:nth-of-type(1) { background-color: cyan; } h1.A:nth-of-type(2), h2.A:nth-of-type(2), h3.A:nth-of-type(2) { background-color: orange; } h1.A:nth-of-type(3), h2.A:nth-of-type(3), h3.A:nth-of-type(3) { background-color: lightgreen; } 
 

h1.A #1

h1.A #2

h1.A #3

h2.A #1

this intervening element is a different type, ie h4 not h2

h2.A #2

h2.A #3

h3.A #1

this intervening element is the same type, ie h3, but has no class

h3.A #2

h3.A #3

Возможно, используя селектор CSS?

 .myclass { background: red; } .myclass~.myclass { background: yellow; } .myclass~.myclass~.myclass { background: green; } 

См. Мой пример на jsfiddle

Interesting Posts
Давайте будем гением компьютера.