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

StackOverflow https://stackoverflow.com/questions/306062

  •  08-07-2019
  •  | 
  •  

Вопрос

Мне нужен селектор CSS, который может найти второй элемент div из 2, имеющий тот же класс.я посмотрел nth-child() но это не то, что я хочу, поскольку я не вижу способа уточнить, какой класс мне нужен.Эти два элемента 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 года (обратите внимание, что я бы не рекомендовал это больше!) :

Если вы можете использовать прототип 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)

означает " вещь, которая имеет класс bar " это тоже второй ребенок.

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

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

<*>

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>

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

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/

И для людей, которые ищут ответ, совместимый с 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 и установить любые дополнительные стили, которые вам понадобятся.

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

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

.foo {}
.foo.last {}

.parent_class div:first-child + div

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top