CSS псевдокласс :first-child
Псевдокласс :first-child
используется для выбора элементов, которые являются первыми дочерними элементами у своих родителей.
/* Выбор всех элементов <p>, которые являются первыми
дочерними элементами внутри родительского элемента */
p:first-child { color: red; }
Псевдокласс :first-child
часто используется совместно с псевдоклассом :last-child
, для одновременной стилизации первого и последнего дочерних элементов.
Пример
table {
width: 70%;
border-collapse: collapse;
}
td {
border: 1px solid #C2C2FF;
padding: 3px 7px;
}
tr:first-child, tr:last-child {
background-color: #9999FF;
color: #fff;
}
<table>
<tr><td>Имя</td><td>Фамилия</td><td>Положение</td></tr>
<tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
<tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
<tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
<tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
<tr><td>Мэгги</td><td>Симпсон</td><td>дочь</td></tr>
<tr><td>Имя</td><td>Фамилия</td><td>Положение</td></tr>
</table>
Результат
Имя | Фамилия | Положение |
Гомер | Симпсон | отец |
Мардж | Симпсон | мать |
Барт | Симпсон | сын |
Лиза | Симпсон | дочь |
Мэгги | Симпсон | дочь |
Имя | Фамилия | Положение |