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

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

В качестве примера HTML-разметки возьмем самую обычную таблицу:Первым делом на ум приходит очевидное решение с перечислением нужного количества элементов, что-то типа такой записи в CSS:Решение рабочее, но его сложно поддерживать, а с увеличением количества обрабатываемых строк будет сильно загромождаться таблица стилей. Можно ли решить задачу более красиво?

Немного теории. Разберем на примере, как работает псевдо-класс :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, такой строки в таблице нет, счетчик останавливается

В результате будут стилизованы только первые четыре строки таблицы. Поставленная задача успешно решена.

Комментарии

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

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.