:first-child
Псевдокласс :first-child CSS псевдокласса представляет собой первый элемент среди группы элементов-потомков.
Попробуйте
Синтаксис
:first-child {
/* ... */
}
Примеры
Базовый пример
HTML
<div> <p>This text is selected!</p> <p>This text isn't selected.</p> </div> <div> <h2>This text isn't selected: it's not a `p`.</h2> <p>This text isn't selected.</p> </div>
CSS
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
Результат
Стилевое оформление списка
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>
Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>
CSS
ul li {
color: blue;
}
ul li:first-child {
color: red;
font-weight: bold;
}
Результат
Спецификации
| Спецификация |
|---|
| Селекторы Уровень 4 # first-child-pseudo |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
:first-child |
4 | 12 | 3 | 9.5 | 3.1 | 18 | 4 | 10.1 | 4 | 1.0 | ≤37 |
no_parent_required |
57 | 79 | 52 | 44 | Нет | 57 | 52 | 43 | Нет | 7.0 | 57 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child