CSS selector p:first-child

Селектор :first-child використовується для обрання визначенних елементів, які є першим нащадком свого батька. Цей селектор аналогічний по своїй дії з селектором :nth-child(1).

автор: NagarD

Синтаксис

:first-child {


    css declarations;


}

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
first-child	4.0	3.0	3.1	9.6	7.0

Мобільних переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

:first-child перевіряє позицію серед усіх дітей батька: жовтим стає лише абзац, що стоїть першим.

HTML

<div>
    <p>Перший p у div — жовтий.</p>
    <p>Другий — без змін.</p>
</div>

CSS

p:first-child {
    background-color: yellow;
}

автор: NagarD

Комбінація: курсив підсвічується лише всередині абзацу, який є першою дитиною свого батька.

HTML

<div>
    <p>Перший абзац із <i>курсивом — жовтим</i>.</p>
    <p>Другий абзац із <i>курсивом без змін</i>.</p>
</div>

CSS

p:first-child i {
    background: yellow;
}

автор: NagarD

Селектор ul > :first-child бере першу дитину саме <ul> — нумерованого списку правило не стосується.

HTML

<ul>
    <li>перший пункт ul — жовтий</li>
    <li>другий</li>
</ul>
<ol>
    <li>перший пункт ol — без змін</li>
</ol>

CSS

ul > :first-child {
    background: yellow;
}

автор: NagarD

Перший пункт списку — жовтий, решта без змін.

HTML

<ul>
    <li>перший — жовтий</li>
    <li>другий</li>
    <li>третій</li>
</ul>

CSS

li:first-child {
    background: yellow;
}

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!