:first-child

Содержание

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

Синтаксис

Селектор:first-child { ... }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>first-child</title>
  <style>
    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. Выделение цветом первого дочернего элемента абзаца

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Меню</title>
  <style>
   .links { 
    background: #F6967D; /* Цвет фона */
   }
   .links a {
    color: #FFFDEB; /* Цвет ссылок */
    display: inline-block; /* Строчно-блочный элемент */
    border-left: 1px solid #B62025; /* Параметры рамки слева */
    padding: 5px 10px; /* Поля вокруг ссылок */
   }
   .links a:first-child {
    border-left: none; /* Убираем первую линию слева */
   }
  </style>
 </head>
 <body>
  <div class="links">
    <a href="page/1.html">uno</a>
    <a href="page/2.html">dos</a>
    <a href="page/3.html">tres</a>
    <a href="page/4.html">cuatro</a>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Ссылки с линией слева

Рис. 2. Ссылки с линией слева

Спецификация

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

Браузеры

Internet ExplorerChromeOperaSafariFirefox
749.543
AndroidFirefox MobileOpera MobileSafari Mobile
11103.1




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 12:53 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru