Mimic alternate row in html

Question

У меня есть веб-сайт со списком <div> s. <div> имеют альтернативный цвет фона на основе :nth-child(odd) и :nth-child(even). Никаких проблем с этим.

Что мне нужно - это сделать альтернативный цвет фона даже после последнего div. Как работает окно Finder Mac OS (это вдохновение для клиента).

Как это сделать? Есть ли какой-либо иной способ, кроме неуклюжих «создания пустых div»?

изображение папки макинтоша в списке:

Answer 1

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

Недостатком было бы то, что чередующиеся разделители имели разные высоты.

Пример (jSFiddle for visual):

#container{ 
    background-image: -webkit-repeating-linear-gradient(90deg, 
    lightgray, 
    lightgray 10px, 
    white 10px, 
    white 20px 
); 
} 

Попробуйте поэкспериментировать с различными единицами (т.е. вместо ЭМ пикселей), и вы должны быть в состоянии достичь чего-то близко к фону Finder. Обратите внимание, что вам, вероятно, потребуется использовать префиксы поставщиков для совместимости браузеров.

Answer 2

Если вы хотите сделать это с помощью CSS, и ваш html-список будет упакован в теги, вы можете присвоить этому тегу свойство фона или фона в классе. (JSFiddle).

HTML

<ul class="list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

CSS

li:nth-child(odd) { 
    color: white; 
    list-style: none; 
    background-color: blue; 
    margin-left: -40px; 
} 
li:nth-child(even) { 
    color: white; 
    list-style: none; 
    background-color: gray; 
    margin-left: -40px; 
} 
.list { 
    padding-bottom: 18px; 
    background: gray; 
} 

Если вы список не обернута в теги UL, то вы можете пересмотреть, как вы получили ваш HTML структурированы.