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

Question

Мне нужен селектор CSS, который может найти 2-й div из 2, который имеет тот же класс. Я посмотрел на nth-child(), но это не то, что я хочу, так как я не вижу способа уточнить, какой класс я хочу. Эти 2 div будут братьями и сестрами в документе, если это поможет.

Мой HTML выглядит примерно так:

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

И я хочу, чтобы второй div.bar (или последний div.bar тоже работал).

Answer 1

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

.bar:nth-child(2)

означает «вещь с классом bar », которая также является вторым ребенком.

Answer 2

ОБНОВЛЕНИЕ : Этот ответ был изначально написан в 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, вы также можете добавить дополнительный класс для второго элемента ...

Answer 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

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

Answer 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>

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

Answer 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;}

DEMO https://jsfiddle.net/ssuryar/6ka13xve/

Answer 6

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

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

HTML:

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

Answer 7

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

Или, как предлагает Стейн, просто добавьте два класса, если можете:

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

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

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