# first-child

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так | Так

##

## Коротка інформація

CSS | CSS1
Застосовується | До усіх елементів
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.селектор org/КОНЦЕРН/CSS21/.html#спочатку-дитина

### Опис

Псевдоклас спочатку-дитина додає стильове оформлення до першого дочірнього елементу селектора, який розташований в дереві елементів документу.

### Синтаксис

тег: first - child {. }

### Значення

Ні.

Приклад 1

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>first - child</title>

<style type="text/css">

B: first - child {

color: red; /* Червоний колір тексту */

}

</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>

Результат прикладу показаний на мал. 1. У цьому прикладі псевдоклас first - child додається до селектора B і встановлює для нього червоний колір тексту. Хоча контейнер <B> зустрічається в першому абзаці три рази, червоним кольором буде виділено лише перша згадка, тобто текст "Lorem ipsum". У інших випадках вміст контейнера <B> відображається чорним кольором. З наступним абзацом усе починається знову, оскільки батьківський елемент помінявся. Тому фраза "Ut wisis enim" також буде виділена червоним кольором.

Мал. 1. Виділення кольором першого дочірнього елементу абзацу

Приклад 2

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>first - child</title>

<style type="text/css">

P {

text - indent: 1em; /* Відступ першого рядка */

}

P: first - child {

text - indent: 0; /* Для першого абзацу відступ прибираємо */

}

</style>

</head>

<body>

<p>Історію цю вже почали забувати, хоча знаходилися городяни, які час від часу

розповідали її новоприбулим в місто відвідувачам.</p>

<p>Легенда обростала подробицями і вже зовсім не нагадувала подію в

дійсності подія. І, проте, жодна людина не наважувалася заїкнутися

про неї з настанням темряви.</p>

<p>Але одного разу до міста знову увійшов незнайомець. Він шкутильгав на ліву ногу.</p>

</body>

</html>

Результат цього прикладу показаний на мал. 2. За правилами типографики відступ першого рядка для першого абзацу тексту зазвичай не задають, але для інших абзаців його додають. З цією метою в прикладі використовується властивість text - indent зі значенням відступу 1em. Для зміни стилю першого абзацу і установки нульового відступу, до селектора P доданий псевдоклас first - child.

Мал. 2. Результат використання псевдокласу first - child