Blog. Just Blog

Стилизация заданного количества HTML-элементов

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Стилизация заданного количества HTML-элементов
Стилизация заданного количества HTML-элементов

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

В качестве примера HTML-разметки возьмем самую обычную таблицу:
  1. <table class="colored">
  2.   <tr><td>строка 1</td></tr>
  3.   <tr><td>строка 2</td></tr>
  4.   <tr><td>строка 3</td></tr>
  5.   <tr><td>строка 4</td></tr>
  6.   <tr><td>строка 5</td></tr>
  7.   <tr><td>строка 6</td></tr>
  8.   <tr><td>строка 7</td></tr>
  9. </table>
Первым делом на ум приходит очевидное решение с перечислением нужного количества элементов, что-то типа такой записи в CSS:
  1. .colored tr:nth-child(1), .colored tr:nth-child(2),
  2. .colored tr:nth-child(3), .colored tr:nth-child(4) {
  3.     background#A0A0A0;
  4. }
Решение рабочее, но его сложно поддерживать, а с увеличением количества обрабатываемых строк будет сильно загромождаться таблица стилей. Можно ли решить задачу более красиво?

Немного теории. Разберем на примере, как работает псевдо-класс :nth-child() при выборе элементов. Кроме фиксированных числовых значений параметра и параметров odd и even, он принимает алгебраический параметр вида Xn+Y, где n - счетчик, а X и Y - целочисленные константы. Счетчик начинается с нулевого значения и увеличивается на единицу с каждой следующей итерацией. Затем вычисляется пример с этим значением счетчика и полученное значение принимается как фиксированный номер элемента. Если элемента с таким номером нет, то счетчик останавливается. Таким образом, применительно к тестовой таблице, селектор вида .colored tr:nth-child(2n+1) будет работать так:
  • 2 * 0 + 1 = 1, это строка 1
  • 2 * 1 + 1 = 3, это строка 3
  • 2 * 2 + 1 = 5, это строка 5
  • 2 * 3 + 1 = 7, это строка 7
  • 2 * 4 + 1 = 9, такой строки в таблице нет, счетчик останавливается
В результате будут стилизованы все нечетные строки таблицы. Если почитать документацию внимательно, то обнаружится, что значение X может быть отрицательным. Но при этом корректными будут считаться только положительные значения, полученные после вычислении примера. Счетчик остановится на первом же некорректном значении элемента. Воспользуемся этим, вспомнив школьный курс математики и заменив селектор на .colored td:nth-child(-1n+4):
  • -1 * 0 + 4 = 4, это строка 4
  • -1 * 1 + 4 = 3, это строка 3
  • -1 * 2 + 4 = 2, это строка 2
  • -1 * 3 + 4 = 1, это строка 1
  • -1 * 4 + 4 = 0, такой строки в таблице нет, счетчик останавливается
В результате будут стилизованы только первые четыре строки таблицы. Поставленная задача успешно решена.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 210 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

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

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.11 сек. / MySQL: 2 (0.0421 сек.) / Память: 4.75 Mb
Наверх