English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-child CSS pseudo-class означает первый элемент в группе братских элементов.
Полное руководство по CSS-селекторам
Совпадает с первым <p>элементом родительского элемента <p>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
p:first-child
{
background-color:orange;
}
</style>
</head>
<body>
<p>Первый абзац основного содержимого.</p>
<h1>Добро пожаловать на мою личную домашнюю страницу</h1>
<p>Этот абзац не является первым ребенком своего родителя.</p>
<div>
<p>Это первый абзац, содержащийся в Div.</p>
<p>Это не первый абзац.</p>
</div>
<p><b>Внимание:</b> :first-child действует на IE8 и более ранние версии браузеров, DOCTYPE должен быть уже объявлен.</p>
</body>
</html>Проверьте, как это работает ‹/›:first-child селектор соответствует первому подэлементу родительского элемента.
Числа в таблице показывают версию первого браузера, поддерживающего этот свойство.
| Выборщик | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
Внимание: :first-child в IE8 и более ранних версиях IE должен быть объявлен<!DOCTYPE>
CSS учебник: CSS псевдо-классы
Выберите каждый <i>элемент в каждом <p> и установите его стиль, где <p> является первым подэлементом родительского элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
p:first-child i
{
background:yellow;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Внимание:</b> :first-child действует на IE8 и более ранние версии браузеров, DOCTYPE должен быть уже объявлен.</p>
</body>
</html>Проверьте, как это работает ‹/›Стиль выбора первого <li>элемента в списке:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Coca Cola</li>
</ol>
<p><b>Внимание:</b> :first-child действует на IE8 и более ранние версии браузеров, DOCTYPE должен быть уже объявлен</p>
</body>
</html>Проверьте, как это работает ‹/›Стиль выбора первого подэлемента каждого элемента <ul>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Основной учебник (oldtoolbag.com)</title>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Coca Cola</li>
</ul>
<p><b>Внимание:</b> :first-child действует на IE8 и более ранние версии браузеров, DOCTYPE должен быть уже объявлен.</p>
</body>
</html>Проверьте, как это работает ‹/›