CSS, чтобы соответствовать последнему совпадению селектора?

Question

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

<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
• Без предоставления последнему элементу дополнительного класса

Answer 1

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

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

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

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

---

¹ _{Примерно так, учитывая, что ваш последний .box также является вторым последним ребенком:}

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

Answer 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;
}

Демо

Answer 3

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

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

Answer 4

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