CSS псевдокласс :first-child
Псевдокласс CSS :first-child применяет стили к первому дочернему элементу. Синтаксис, особенности и примеры.
Псевдокласс CSS :first-child соответствует элементу, который является первым дочерним элементом своего родителя. Чаще всего он используется для стилизации первого элемента списка, первого абзаца раздела или для удаления верхнего отступа/границы у первого элемента в группе.
На этой странице рассматриваются синтаксис, распространённая ошибка, несколько интерактивных примеров, а также отличие :first-child от близких по смыслу селекторов.
Важный нюанс: «первый дочерний» — это не «первый данного типа»
Селектор вида p:first-child не означает «первый <p> внутри родителя». Он означает «<p>, который является самым первым дочерним элементом своего родителя». Если перед абзацем стоит другой элемент, правило ни к чему не применится.
<div>
<h2>Heading</h2>
<p>This paragraph is NOT styled — the <h2> is the first child.</p>
</div>
<div>
<p>This paragraph IS styled — it is the first child of its <div>.</p>
</div>Таким образом, p:first-child читается справа налево: выбери <p>, но только если он является первым дочерним элементом своего родителя. Когда нужно выбрать «первый абзац независимо от того, что стоит перед ним», используйте :first-of-type.
:first-child и связанные селекторы
| Селектор | Соответствует |
|---|---|
:first-child | Элемент, являющийся первым дочерним элементом своего родителя |
:last-child | Элемент, являющийся последним дочерним элементом своего родителя |
:first-of-type | Первый элемент своего типа среди соседних элементов |
:only-child | Элемент, являющийся единственным дочерним элементом своего родителя |
:nth-child(n) | n-й дочерний элемент, по любой формуле (2n, 3n+1 и т.д.) |
:first-child эквивалентен :nth-child(1). Ключевое отличие от :first-of-type состоит в условии: :first-child совпадает только если элемент является первым дочерним элементом своего родителя, тогда как :first-of-type совпадает с первым элементом своего конкретного типа среди соседних — независимо от того, что стоит перед ним.
Версия
Синтаксис
Пример синтаксиса CSS :first-child
:first-child {
css declarations;
}Примеры
С тегом <p>
Здесь первый <p> является первым дочерним элементом <body>, поэтому к нему применяются стили. Второй <p> следует за <h2>, поэтому к нему стили не применяются.
Пример кода CSS :first-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-child {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<h2>First-child selector example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>С тегом <li>
li:first-child выделяет первый элемент в каждом списке. Поскольку и <ul>, и <ol> сбрасывают счётчик дочерних элементов, первый <li> каждого из них получает фон.
Ещё один пример кода CSS :first-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>С тегом <ol>
Два элемента <ol> расположены рядом внутри <body>. Только первый из них является первым дочерним элементом <body>, поэтому только он получает фон.
Пример селектора :first-child с тегом HTML ol
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ol:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
</body>
</html>С тегом <em>
p em:first-child нацелен на <em> только тогда, когда он является первым дочерним элементом <p>. В каждом абзаце ниже перед первым <em> стоят слова «Here is a», поэтому он не является первым дочерним элементом — правило ни к чему не применяется. Это намеренная иллюстрация описанного выше нюанса.
Пример селектора :first-child с тегом HTML em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p em:first-child {
background: #82b534;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<article>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
</article>
</body>
</html>С тегом <ul>
:first-child работает на каждом уровне вложенности. Первый элемент внешнего списка и первый элемент вложенного списка оба соответствуют селектору ul li:first-child.
Пример селектора :first-child с тегом HTML ul
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
color: blue;
}
ul li:first-child {
color: #8ebf42;
font-weight: bold;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Поддержка браузерами
:first-child поддерживается во всех современных браузерах и работает в Internet Explorer 9 и более поздних версиях. Он является частью CSS Level 2 и остался неизменным в Selectors Level 3 и Level 4, поэтому его можно использовать без каких-либо вендорных префиксов.
Связанные селекторы
:last-child— стилизует последний элемент в группе:first-of-type— первый элемент заданного типа, независимо от того, что стоит перед ним:only-child— соответствует элементу, у которого нет соседних элементов:nth-child()— соответствует элементам по позиции с формулой (:first-childравен:nth-child(1))