CSS для соответствия последнему совпадению селектора?

У меня есть структура вроде:

<div id="holder">
    <div id="first"></div>
    <div class="box">I'm the first</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Nothing special</div>
    <div class="box">Make this background orange!!!</div>
    <div id="last"></div>
</div>​

Мне нужен последний элемент .box, чтобы иметь оранжевый фон.

.box:last-child{} не будет работать, потому что это не последний ребенок. Помимо обертывания только элемента .box в элементе, есть ли способ сделать это? Эта проблема представляет собой то, что я пытаюсь сделать, но я также хотел бы знать, есть ли способ сопоставления последнего совпадающего элемента селектора.

http://jsfiddle.net/walkerneo/KUa8B/1/

Дополнительные примечания:

  • Нет javascript
  • Отсутствие последнего элемента для дополнительного класса

Ответы

Ответ 1

Извините, кроме злоупотребления комбинаторами или :nth-last-child() таким образом, который полностью зависит от вашей структуры HTML 1 в настоящее время это невозможно с помощью CSS-селекторов.

Эта особенность, похоже, будет добавлена ​​в Selectors 4 как :nth-last-match(), хотя, что в вашем случае будет использоваться следующим образом:

:nth-last-match(1 of .box) {
    background: orange;
}

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

1 Что-то вроде этого, учитывая, что ваш последний .box также является вторым последним дочерним:

.box:nth-last-child(2) {
    background: orange;
}

Ответ 2

Вы можете дать nth-last-of-type() для обходного пути

#holder > .box:nth-last-of-type(2) {
    background:orange;
}

Демо

Однако здесь также есть и другой способ сделать это.

<div id="holder">
    <div id="first"></div>
    <div class="boxes">
        <div class="box">I'm the first</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Nothing special</div>
        <div class="box">Make this background orange!!!</div>
    </div>
    <div id="last"></div>
</div>

Затем вы можете использовать

.boxes .box:last-child {
    background:orange;
}

Демо

Ответ 3

Вы можете использовать этот селектор css, если знаете, что ваш класс ящиков с оранжевым фоном всегда второй.

.box:nth-last-of-type(2){
 background:orange;   
}

Ответ 4

div:nth-last-child(2){
    background-color: orange; 
}