CSS3 меняет цвет фона

Question

Я хочу иметь ряд элементов, и я хочу иметь инкрементные цвета фона, но я также хочу не жестко его кодировать, чтобы можно было в будущем расширять.

<div class="container"> 
    <div>one</div> 
    <div>two</div> 
    <div>three</div> 
</div> 

я мог бы сделать что-то вроде этого:

.container div:nth-child(0) { 
    background-color: #0000ff; 
} 
.container div:nth-child(1) { 
    background-color: #000066; 
} 
.container div:nth-child(2) { 
    background-color: #000000; 
} 

я предпочел бы сделать это с одним правилом, что позволило бы более лаконичный код, а также позволяет получить дополнительную расширяемость (для, скажем, 6 элементов). Возможно ли это? Я знаю, что что-то вроде этого довольно просто с JQuery, но я предпочел бы просто использовать CSS, если это возможно.

Answer 1

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

.container div { 
 
    background-image: linear-gradient(yellow, blue); 
 
    background-size: 20000px 20000px; 
 
    } 
 

 
.container div:nth-child(1) { 
 
    background-position: 0% 0%; 
 
} 
 

 
.container div:nth-child(2) { 
 
    background-position: 0% 30%; 
 
} 
 

 
.container div:nth-child(3) { 
 
    background-position: 0% 100%; 
 
}

<div class="container"> 
 
    <div>one</div> 
 
    <div>two</div> 
 
    <div>three</div> 
 
</div>