Применить CSS ко всем div в контейнере до текущего div

Допустим, у нас есть этот макет:

<div id="container">

    <div></div>
    <div></div>
    <div class="current"></div>
    <div></div>
    <div></div>

</div>

С некоторыми CSS:

#container div {
  width: 20px;
  height: 20px;
}

Как я могу сделать все div перед и включать div (внутри #container) с классом current, иметь тот же цвет фона, например. background: tomato;? И обновляется, если переменная div, на которой изменяется class="current"?

Итак, в приведенном выше примере первые три div в контейнере будут иметь цвет фона томатов.

ОТВЕТЫ

Ответ 1

Вы можете использовать общий селектор .

#container div {
  width: 20px;
  height: 20px;
  
  background-color:tomato;
}

#container .current ~ div {
  background-color:transparent;
}
<div id="container">

    <div>1</div>
    <div>2</div>
    <div class="current">3</div>
    <div>4</div>
    <div>5</div>

</div>

Ответ 2

вот другой способ его работы

http://jsfiddle.net/27LjLqm2/

<div id="container">

<div>1</div>
<div>2</div>
<div class="current">3</div>
<div>4</div>
<div>5</div>

</div>


#container div {
width: 20px;
height: 20px;
background:tomato;
}

#container div:nth-last-child(-n+2){
background:transparent;
}

мы нацеливаем последний DIV списка

"-n" находится под пятым div, так что +2 заставит нас перейти к вершине дважды.

использование "+1" сделает прозрачный "div 5".

+2 будет проходить весь путь от "div 5 до div 4" и сделать их фон прозрачным.

вы можете немного поиграть с ним, используя +3, затем +4, чтобы увидеть, что изменилось.

Ответ 3

в то время как вы отметили JQuery.. в jQuery вам нужно использовать . prevAll ('div')

$(document).ready(function(){
    $('.current').prevAll('div').css('background','tomato');
});

и вы запрашиваете первые 3 divs

$(document).ready(function(){
    $('.current').css('background','tomato').prevAll('div').css('background','tomato');
});

Демо