Селектор CSS3, чтобы найти второй div того же класса

Ответ 1

ОБНОВЛЕНИЕ. Этот ответ был первоначально написан в 2008 году, когда поддержка nth-of-type в лучшем случае была ненадежной. Сегодня я бы сказал, что вы можете безопасно использовать что-то вроде .bar:nth-of-type(2), если вам не нужна поддержка IE8 и старше.

Оригинальный ответ от 2008 года (обратите внимание, что я бы больше не рекомендовал этого!):

Если вы можете использовать Prototype JS, вы можете использовать этот код для установки некоторых значений стиля или добавить другое имя класса:

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

(я не тестировал этот код, и он не проверяет, действительно ли есть второй div, но что-то вроде этого должно работать.)

Но если вы создаете html-серверы, вы можете просто добавить дополнительный класс во второй элемент...

Ответ 2

Селекторы можно комбинировать:

.bar:nth-child(2)

означает "вещь, которая имеет классную строку", которая также является вторым ребенком.

Ответ 3

Мой оригинальный ответ относительно :nth-of-type просто неправильный. Спасибо Полу за указание на это.

Слово "тип" там относится только к "типу элемента" (например, div). Оказывается, что селекторы div.bar:nth-of-type(2) и div:nth-of-type(2).bar означают одно и то же. Оба элемента select, которые [a] являются вторым div своего родительского элемента, а [b] имеют bar классов.

Таким образом, единственное оставшееся чистое решение CSS, о котором я знаю, если вы хотите выбрать все элементы определенного селектора, кроме первого, это общий родственный селектор:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

Мой оригинальный (неправильный) ответ:

С приходом CSS3 появилась еще одна возможность. Возможно, он не был доступен, когда вопрос был задан впервые:

.bar:nth-of-type(2)

http://www.w3schools.com/cssref/sel_nth-of-type.asp

Это выбирает второй элемент, который удовлетворяет селектору .bar.

Если вам нужен второй и последний элемент определенного типа (или все они, кроме первого), общий селектор брата также будет работать нормально:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

Короче. Но, конечно, нам не нравится дублировать код, верно? :-)

Ответ 4

Что именно представляет собой структура вашего HTML?

Предыдущий CSS будет работать, если HTML такой:

CSS

.foo:nth-child(2)

HTML

<div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
...
</div>

Но если у вас есть следующий HTML-код, он не будет работать.

<div>
 <div class="other"></div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
 ...
</div>

Простой put, нет селектора для получения индекса совпадений от остальной части селектора перед ним.

Ответ 5

HTML

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

CSS

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

ДЕМО https://jsfiddle.net/ssuryar/6ka13xve/

Ответ 6

И для людей, которые ищут jQuery-совместимый ответ:

$('.foo:eq(1)').css('color', 'red');

HTML:

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...    

Ответ 7

Есть ли причина, по которой вы не можете сделать это через Javascript? Моим советом было бы нацелить селекторов на универсальное правило (.foo), а затем проанализировать его, чтобы получить последнее foo с Javascript и установить любой дополнительный стиль, который вам понадобится.

Или, как предложил Stein, просто добавьте два класса, если вы можете:

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}

Ответ 8

.parent_class div:first-child + div

Я только что использовал выше, чтобы найти второй div, связав первый-младший с селектором +.