CSS — чередование фона псевдоклассом nth-child

css cheredovanie fona - CSS — чередование фона псевдоклассом nth-child

Допустим у нас есть несколько блоков, которым нужно задать разный фон. Как быстро решить проблему? Воспользоваться псевдоклассом 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/

Пример чередования в рубриках

css cheredovanie fona dle shortstory - CSS — чередование фона псевдоклассом nth-child

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Бесполезно писать спамные сообщения. Все комментарии проверяются;
Можно оставлять ссылки (через <a href), если они несут полезную информацию или дополняют статью;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *