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

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

65 голосов
/ 01 мая 2010

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

<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 ), который я сейчас использую, но мне нужноальтернатива без сценариев.

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

Ответы [ 5 ]

56 голосов
/ 15 декабря 2012

использовать 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) { };

OR

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

.myclass:nth-of-type(1) { };
.myclass:nth-of-type(2) { };
.myclass:nth-of-type(3) { };
29 голосов
/ 28 августа 2011

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

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

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

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

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

14 голосов
/ 29 октября 2011

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

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

Я думал, что ответ выглядел хорошо. Фактически, это дало мне то, что я искал: :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 с. Я поместил класс A на некоторые из них, сгруппировал их по 3, а затем покрасил 1-й, 2-й и 3-й экземпляры в синий, оранжевый и зеленый, используя h?.A:nth-of-type(?). (Но, если вы внимательно читаете, вы должны спросить «1, 2 и 3 экземпляры чего?»). Я также вставил разнородный (то есть другой h уровень) или похожий (т.е. тот же h уровень) неклассифицированный элемент в некоторые группы.

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

Ну, надеюсь, это поможет. И спасибо, @ 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>
8 голосов
/ 16 января 2015

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

.myclass {
    background: red;
}

.myclass~.myclass {
    background: yellow;
}

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

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

...