first-child
 Internet Explorer |  Netscape |  Opera |  Safari |  Firefox | |||||||||||||
| 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 | ||||
| Нет | Нет | Да | Да | Да | Да | Да | Да | Да | Да | Да | Нет | Да | Да | ||||
| CSS | CSS1 |
| Применяется | Ко всем элементам |
| Аналог HTML | Нет |
Описание
Псевдокласс first-child добавляет стилевое оформление к первому дочернему элементу селектора, который расположен в дереве элементов документа.
Синтаксис
тег:first-child { ... }
Значения
Нет.
Пример 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.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>В данном примере псевдокласс first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <B> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <B> отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Пример 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.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>По правилам типографики отступ первой строки для первого абзаца текста обычно не задают, но для остальных абзацев его добавляют. С этой целью в примере используется свойство text-indent со значением отступа 1em. Для изменения стиля первого абзаца и установки нулевого отступа, к селектору P добавлен псевдокласс first-child.