在当前div之前将CSS应用于容器中的所有div

Question

让我们说我们有这样的布局:

<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(within #container)之前和包括class current具有相同的背景颜色,例如background: tomato;？并更新如果正在进行的div class="current"更改？

因此,在上面的示例中,容器中的前3个div将具有番茄的背景颜色.

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