first-child

Браузер	Internet Эксплорер				Нетscape		Опера				Safari			Файер фох
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Нет	Нет	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Нет	Да	Да

Краткая информация

CSS (ЦСС)	CSS (ЦСС)2
Применяется	Ко всем элементам
Аналог ШТМЛ	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/selector.ШТМЛ#first-child

Описание

Псевдокласс first-child добавляет стилевое оформление к первому дочернему элементу селектора, который расположен в дереве элементов объекта.

Синтаксис

тег:first-child { ... }

Аргументы

Нет.

Пример 1

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <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

Рис. 1. Выделение цветом первого дочернего элемента абзаца

Пример 2

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <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

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