Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child

Обновлено: 12 марта 2015

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Решил написать небольшой пост по теме использования CSS в целях улучшения восприятия посетителями сайта.

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

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

Не требуется помечать классами четные и нечетные элементы списка (правое меню у меня на основе маркированного Html списка функционирует). Достаточно лишь дописать пару строк кода с использованием псевдокласса nth-child в файл CSS, который отвечает за стилевое оформление сайта. Однако, nth-child имеет и массу других применений, о чем тоже не премину упомянуть в посте.

Возможности псевдокласса nth-child и его применение на сайте


Собственно, после анонсирования псеводкласса nth-child можно было бы пост и завершать, ибо вы и сами можете нагуглить массу информации по нему. Но это не наш путь, поэтому продолжим. Итак, сначала я опишу свои действия по превращению правого меню в «полосатое». Достаточно было выяснить с помощью встроенных в браузеры инструментов для разработчиков (вызывается из контекстного меню нужного элемента на веб-странице выбором пункта подобного «Просмотр код элемента») в каком месте файла стилей задается внешний вид строк этого списка.

Принцип работы с инструментами разработчиков аналогичен тому, что я описывал в статье про Фаербаг. Кликаем правой кнопкой по любому пункту в левом меню моего блога и смотрим на открывшейся панели результирующий отчет:

Слева вы увидите Html код этого элемента (нас интересует элемент с тегами LI — строка списка), а в правой колонке приведены CSS правила, которые браузер использует для его стилевого оформления. Где находится стилевой файл вы сможете незамедлительно узнать, подведя курсор мыши к его названию.

В моем случае это будет файл style.css из папки с используемой темой оформления, который можно открыть подключившись к сайту по ФТП и пройдя по следующему пути (править файлы шаблона из админки WordPress я бы не советовал, ибо нет возможности сделать шаг назад, как это позволяет, например, Нотепад++).

/wp-content/themes

Собственно, на панели инструментов для разработчиков в области CSS стилей вы даже строку найдете, на которой нужное правило прописано в файле стилей. В моем случае это 281 строка. Поэтому, открыв style.css в Нотепаде (он у меня назначен редактором по умолчанию для всех файлов, которые встречаются в движке сайта), я на эту строку немедленно переместился.

И дописал сразу под ней еще пару правил с псевдоклассом hover (это правило отвечает за изменение цвета фона строки правого меню, когда прямо над ней находится курсор мыши — это делает меню более «живым», что ли) и с упомянутым выше псевдоклассом nth-child. Если про hovver мы уже говорили (см. ссылку чуть выше), то про nth-child поговорим сейчас. Если обратили внимание, что в круглых скобках для этого псевдокласса прописан параметр 2n.

nth-child(2n)

В общем виде значение этого псевдокласса nth-child задаётся с помощью выражения: an+b, где a и b — целые числа, а n — счетчик, принимающий целые значения от 0 и больше: 0,1,2,3... В нашем случае при при изменение счетчика n мы будем получать цифры 0, 2, 4, 6 и т.д. Это означает, что прописанное для этого псевдокласса свойство (в нашем случае это правило для задания фона строки списка с помощью background-color) nth-child (2n) позволит заменить фон четных строк в списке на #E4F2FA.

Этот шестнадцатеричный формат записи кода цвета используется в css и Html наиболее часто. Для поиска подходящих цветов я использовал программу Contrast Analyser 2.0, описанную по приведенной ссылке. Она позволяет захватить цвет с экрана и подобрать его более светлые тона, что я, собственно, и сделал.

Для фона строки меню, при наведении на нее курсором мыши (псевдокласс hover), я выбрал еще более светлый оттенок из того же ряда.

Другие примеры использования nth-child


Если захотите изменить фон или каким-то еще образом воздействовать на внешний вид нечетных строк (например, добавить им отступы, увеличить шрифт или сделать еще что-то более неприличное), то используйте выражение nth-child (2n+1). Можете проверить, что подставляя вместо n целые числа начиная с нуля, вы получите в результате только нечетные числа. Можно использовать сразу оба варианта (для четных и нечетных строк списков, таблиц или чего-либо еще).

Еще несколько примеров использования nth-child для выделения различных строк списков, таблиц и тому подобных элементов:

  1. Для глумления над нечетными элементами можно использовать вместо показанного выше выражения nth-child (odd), а для четных — nth-child (even).
  2. Если захотите внести изменения только в четвертую строку? то допишите к CSS правилу через двоеточие псевдокласс nth-child (4).
  3. Хотите изменить вид строк начиная с девятой? Нет проблем — nth-child (n+9).
  4. Если хотите наоборот, выделить только первые девять элементов, то воспользуйтесь конструкцией nth-child (-n+9).
  5. Хотите выделить элементы начиная с девятого по восемнадцатый — добавьте составной псевдокласс :nth-child (n+9):nth-child (-n+18). Чистая логика.
  6. Хотите сделать то же самое, что и в предыдущем пункте, но при этом выделить в этом диапазоне только четные строки? Да нет проблем — :nth-child (n+9):nth-child (-n+18):nth-child (even).

Ну вот, где так. Штука может оказаться весьма полезной. Во всяком случае, мне пригодилась.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить
* Нажимая на кнопку "Подписаться" Вы соглашаетесь с политикой конфиденциальности.

Подборки по теме:

Рубрика: Уроки CSS

Комментарии и отзывы

Gilo

А подскажите пожалуйста, чем картинки к постам вы рисуете?

Дмитрий

Здравствуйте!

Рисует супруга в Фотошопе, а основу я подбираю тут — Иконки, значки, фоны, картинки и логотипы для сайта

дмитрий

Почему нет цвета,соединение с html установлена,картинке добавляет а цвет на эту строку таблице не дает. помогите кто тем сможет вот строка с html 12.12.201119.00КефирМосква13530 а вот с css

tr. blue td {

backround-color:#CEEFFF;

} Скажите в чем причина нет соединения и цвета

Текст Вашего сообщения:

Подписаться на новые комментарии к этой статье

* Нажимая на кнопку "Добавить комментарий" или "Подписаться" Вы соглашаетесь с политикой конфиденциальности.