Що робить :first-child?
:first-child, це псевдоклас, який вибирає елемент, що є першою дитиною свого батьківського елемента. Він спрацює лише в тому випадку, якщо елемент дійсно стоїть першим усередині контейнера, серед усіх сусідів на одному рівні.
Приклад
html
<ul>
<li>Перший</li>
<li>Другий</li>
</ul>css
li:first-child {
color: red;
}У цьому прикладі червоним стане тільки перший <li>, тому що він, перший дочірній елемент усередині ul.
Коли :first-child НЕ спрацює
Якщо li не перший у списку:
html
<ul>
<span></span>
<li>Пункт</li>
</ul>Тоді li:first-child не застосується, тому що першою дитиною є span.
Підсумок
:first-child вибирає лише ті елементи, які перебувають на першій позиції всередині свого батьківського елемента. Він залежить від структури HTML і не дивиться на тип тегу, важливе лише положення в дереві.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.