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

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

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

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

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

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

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

<div class="parent_class">
    <div class="myclass">my text1</div>
    some other code+containers...

    <div class="myclass">my text2</div>
    some other code+containers...

    <div class="myclass">my text3</div>
    some other code+containers...
</div>
.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) { };

Ответ 3

Да, вы можете это сделать. Например, чтобы создать теги 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 */
}

Ответ 4

Возможно, с помощью селектора "~" CSS?

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

См. мой пример в jsfiddle

Ответ 5

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

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

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

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

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

Обратите внимание, в частности, на последнюю группировку 3. В этом случае между первым и вторым элементами h3.A вставлен неклассифицированный элемент h3. В этом случае не появляется 2-й цвет (то есть оранжевый), а 3-й цвет (т.е. Зеленый) отображается во втором экземпляре h3.A. Это показывает, что n in 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;
}
<div>
  <h1 class="A">h1.A #1</h1>
  <h1 class="A">h1.A #2</h1>
  <h1 class="A">h1.A #3</h1>
</div>

<div>
  <h2 class="A">h2.A #1</h2>
  <h4>this intervening element is a different type, i.e. h4 not h2</h4>
  <h2 class="A">h2.A #2</h2>
  <h2 class="A">h2.A #3</h2>
</div>

<div>
  <h3 class="A">h3.A #1</h3>
  <h3>this intervening element is the same type, i.e. h3, but has no class</h3>
  <h3 class="A">h3.A #2</h3>
  <h3 class="A">h3.A #3</h3>
</div>