Пример 1
Как стилизовать все элементы <p>, которые являются первым потомком родителей:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p:first-child { background-color:yellow; }
</style>
</head>
<body>
<h1>Добро пожаловать на мою домашнюю старницу</h1>
<p>Это параграф не первый потомок родителей.</p>
<div class="intro">
<p>Это параграф первый потомок элемента div.</p>
<p>Этот параграф нет.</p>
</div>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Определение и использование
Псевдо-элемент :first-child стилизует указанный селектор, если он первый потомок родителей.
Поддержка браузеров
Селектор :first-child поддерживается во всех ведущих браузерах.
Примечание: Для того, чтобы :first-child работал в IE, необходимо указать !DOCTYPE.
Версия CSS
Селектор :first-child впервые представлен в: CSS 2
Связанные страницы
Пособие по CSS: CSS Псевдо-классы
Еще примеры
Пример 2
Стилизует первый элемент <i> каждого родительского элемента:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
i:first-child { background:yellow; }
</style>
</head>
<body>
<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 3
Стилизует все элементы <i> каждого элемента <p>, где элемент <p> является первым потомком его родителей:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
i:first-child i { background:yellow; }
</style>
</head>
<body>
<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p>Я <i>сильный</i> человек. Я <i>сильный</i> человек.</p>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 4
Стилизует первый элемент <li> каждого списка:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
li:first-child { background:yellow; }
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Пример 5
Стилизует первый элемент каждого элемента <ul>:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul>:first-child { background:yellow; }
</style>
</head>
<body>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Кока Кола</li>
</ul>
<p><b>Примечание:</b> Для того, чтобы :first-child работал в IE, необходимо указать DOCTYPE.</p>
</body>
</html>
Была ли эта информация полезной?
