first-child

Функции PHP

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Sep

2010

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

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