Мне нужен селектор CSS, который может найти второй 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 тоже будет работать).
ОБНОВЛЕНИЕ. Этот ответ был первоначально написан в 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-серверы, вы можете просто добавить дополнительный класс во второй элемент...
Селекторы можно комбинировать:
.bar:nth-child(2)
означает "вещь, которая имеет классную строку", которая также является вторым ребенком.
Мой оригинальный ответ относительно :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
Короче. Но, конечно, нам не нравится дублировать код, верно? :-)
Что именно представляет собой структура вашего 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, нет селектора для получения индекса совпадений от остальной части селектора перед ним.
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;}
И для людей, которые ищут jQuery-совместимый ответ:
$('.foo:eq(1)').css('color', 'red');
HTML:
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
Есть ли причина, по которой вы не можете сделать это через Javascript? Моим советом было бы нацелить селекторов на универсальное правило (.foo), а затем проанализировать его, чтобы получить последнее foo с Javascript и установить любой дополнительный стиль, который вам понадобится.
Или, как предложил Stein, просто добавьте два класса, если вы можете:
<div class="foo"></div>
<div class="foo last"></div>
.foo {}
.foo.last {}
.parent_class div:first-child + div
Я только что использовал выше, чтобы найти второй div, связав первый-младший с селектором +.