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

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



Deprecated: Функция WP_Query вызвана с аргументом, который считается устаревшим с версии 3.1.0! Параметр caller_get_posts считается устаревшим. Используйте ignore_sticky_posts. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078
JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

Deprecated: Файл Тема без comments.php с версии 3.0.0 считается устаревшим. Альтернативы не предусмотрено. Пожалуйста, включите шаблон comments.php в вашу тему. in /home/artem952/domains/devarts.pro/public_html/wp-includes/functions.php on line 6078

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