Селектор CSS3 для поиска второго div того же класса

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

.bar:nth-child(2)

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

Какова именно структура вашего 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>

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

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

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

Если вы можете использовать Прототип 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-сервер, вы можете просто добавить дополнительный класс для второго элемента ...

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

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

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

.foo {}
.foo.last {}

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

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

HTML:

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

.parent_class div:first-child + div

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

Мой первоначальный ответ относительно :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

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

Сначала вы должны выбрать родительский элемент и установить :nth-of-type(n) для родительского, а затем выбрать нужный элемент. что-то вроде этого :

#topmenu li:nth-of-type(2) ul.childUl {

Это выберет второе подменю из верхнего меню. #topmenu li - родительский элемент.

HTML:

<ul id = "topmenu">
    <li>
        <ul class = "childUl">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul class = "childUl">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul class = "childUl">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>