Допустим у нас есть несколько блоков, которым нужно задать разный фон. Как быстро решить проблему? Воспользоваться псевдоклассом nth-child
HTML разметка
<ul class="films">
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
<li>some text</li>
</ul>
CSS стили
.films li{
border-bottom: 1px solid #ccc;
/*width: 100%;*/
list-style-type: none;
padding: 10px 0 10px 5px;
margin-left: 210px;
}
.films li:first-child{
border-top: 1px solid #ccc;
}
.films li:nth-child(even){
background: #f8f8ff;
}
.films li:nth-child(odd){
background: #E9E9E9;
}
Работает не везде. В коротких новостях в виде блоков по две штуки в ряд не захотело и штамповало один и тот же цвет, а здесь, где блоки идут один под другим все нормально. Вот статья с подробным описанием на http://htmlbook.ru/
Комментарии