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

Если у вас есть HTML:

<section class="column">
  <p> Some Test </p>
  <p> Some Test </p>
  <p> Some Test </p>
</section>

<section class="column">
  <p> Some More Test </p>
  <p> Some More Test </p>
  <p> Some More Test </p>
</section>

<section class="someotherclass">
  <p> Some More Test </p>
  <p> Some More Test </p>
  <p> Some More Test </p>
</section>

и CSS:

.column:last-child { background:red; }

http://jsfiddle.net/WYu24/

Есть ли способ заставить селектор :last-child выбрать последнее вхождение класса?


css css-selectors pseudo-class
person Jai    schedule 19.04.2012    source источник
comment
Я знаю, что это не идеально, но вы можете использовать jquery, чтобы найти последний экземпляр и применить к нему дополнительный класс.   -  person Marcin    schedule 19.04.2012

Ответы (1)


arrow_upward
3
arrow_downward

В настоящее время в CSS нет сокращенного синтаксиса или псевдокласса для поиска первого или последнего дочернего элемента, имеющего определенный класс.1

Я использую метод переопределения для оформления первого дочернего элемента с определенным классом, который я подробно описываю в этом ответе. Однако из-за того, как работают одноуровневые комбинаторы, этот метод не может быть применен к последнему дочернему элементу, имеющему определенный класс.

Я не знаю какого-либо чистого способа CSS для нацеливания на последнего ребенка, имеющего определенный класс. Для этого вам нужно использовать JavaScript или реструктурировать разметку. Если есть только один такой элемент, то с помощью jQuery вы можете просто использовать селектор :last, чтобы добавить класс, который затем можно стилизовать с помощью CSS:

$('.column:last').addClass('last');

.column.last { background:red; }

предварительный просмотр jsFiddle

1 Есть некоторые новые псевдо- классы, предлагаемые в Selectors 4, которые соответствовали бы всем требованиям, но браузеры не начнут их реализовывать в течение следующих нескольких месяцев или до тех пор, пока спецификация не станет более стабильной, и даже тогда мы не знаем, являются ли эти псевдоклассы останусь, потому что текущий синтаксис выглядит довольно неудобным:

:nth-last-match(1 of .column) { background:red; }
person BoltClock    schedule 19.04.2012