:first-child
Псевдокласс :first-child
Псевдоклас :first-child задає стиль першого елемента в групі братніх елементів (які мають один батьківський елемент).
Як приклад розглянемо такий код HTML:
<article>
<h1>Роль цитокінів при дорсалгії</h1>
<p>Автор: Гордон Фрімен, канд. фіз.-мат. наук</p>
<p>Зміст статті</p>
<address>Пошта: [email protected]</address>
<p>Опублікована: <time datetime="2018-11-27">27 листопада 2018</time></p>
</article>Псевдоклас :first-child без зазначення селектора вибере всі перші елементи всередині <article> і встановить для них червоний колір тексту. Тут першими йдуть <h1> і <time>, вони й будуть обрані.
article :first-child { color: red; }При додаванні селектора до :first-child спершу береться перший елемент, потім дивиться якого він типу. Якщо елемент збігається із зазначеним селектором, то він буде обраний. Таким чином, вибирається елемент, якщо він задовольняє двом умовам одночасно: це перший елемент і це елемент зазначеного типу. Тут червоним кольором буде виділено заголовок, оскільки першим йде саме <h1>.
article h1:first-child { color: red; }Якщо замість h1 використовувати інший селектор, то нічого вибрано не буде, оскільки не виконується умова "перший елемент це <p>".
article p:first-child { color: red; }
Для вибору першого елемента певного типу використовуйте псевдоклас :first-of-type.
Замість :first-child припустимо використовувати :nth-of-child(1).
Синтаксис
<i>Селектор</i>:first-child { ... }
Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>first-child</title>
<style>
B:first-child {
color: red; /* Red text color */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
consequat</b>.</p>
</body>
</html>