Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
В предыдущем уроке познакомились со свойствами color, background, border-color и научились менять цвет текста, фона и рамок в HTML-таблицах. В этом уроке продолжим разукрашивать таблицу.
Красим каждую вторую строку и столбец
Для решения этой задачи помогут псевдоклассы. Подробно писать не буду, об этом будет целый курс. Часто задают вопрос на эту тему, поэтому я решил ответить на него.
Будем использовать псевдокласс :nth-child, он очень полезный и часто находит свое применение. Используется для добавления стилей, базируясь на дереве элементов. Далее пример:
<table>
<tr>
<td>Первый в дереве, нечетный</td>
<td>Второй в дереве, четный</td>
<td>Третий в дереве, нечетный</td>
</tr>
</table>Чтобы применить стили для четных элементов, то псевдокласс получится таким :nth-child(2n), если для не четных, то :nth-child(2n-1), для первого и третьего элемента :nth-child(1) и :nth-child(3) соответственно. Думаю, смысл понятен, это продолжать можно до бесконечности. Далее пример:
table td:nth-child(2n) {
background: #F1F1F1;
}
Далее переходите к следующему разделу.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
