Псевдокласс :first-child
Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
Синтаксис
Значения
XHTML 1.0 CSS2.1 IE Cr Op Sa Fx
first-child Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат примера показан на рис. 1. В данном примере псевдокласс :first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т.е. текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается черным цветом. Со следующим абзацем все начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Рис. 1. Выделение цветом первого дочернего элемента абзаца
HTML5 CSS2.1 IE Cr Op Sa Fx
Меню uno dos tres cuatro Результат данного примера показан на рис. 2.
Рис. 2. Ссылки с линией слева
:first-child¶
Псевдо-класс :first-child находит любой элемент, являющийся первым в своём родителе.
Синтаксис¶
1 2 3 4 5
/* Selects any that is the first element
among its siblings */ p:first-child color: lime; > Спецификации¶
- Selectors Level 4
- Selectors Level 3
- CSS Level 2 (Revision 1)
Пример¶
HTML CSS Результат
1 2 3 4 5 6 7 8 9
div> p>This text is selected!p> p>This text isn't selected.p> div> div> h2>This text isn't selected: it's not a `p`.h2> p>This text isn't selected.p> div> 1 2 3 4 5
p:first-child color: lime; background-color: black; padding: 5px; > :first-child и :last-child
Псевдокласс :first-child позволяет задать стиль для первого дочернего элемента из группы братских элементов, то есть таких, у которых один родитель.
Для демонстрации воспользуемся следующим списком.
-
. Таким образом, :first-child выберет первый пункт списка с текстом «Uno».
Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child . Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент
. Если первым элементом будет
, то к нему применяются стилевые правила; если первым оказывается другой элемент (не
), то стиль к нему не применяется.
Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.
Один
Uno Два
Dos Три
Tres Следующий стиль сделает текст первого элемента внутри зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.
section > :first-child
Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он . Поскольку первым элементом внутри у нас идёт
, то стиль применяться не будет.
section > div:first-child
Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно
.
section > p:first-child
Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент идёт последним.
section > div:last-child
Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child .
Пример 1. :first-child для списка
Результат данного примера показан на рис. 1.
Рис. 1. Список с вертикальными линиями
Аналогичный результат достигается и с помощью :last-child , только вместо линии слева надо сделать её справа через свойство border-right.
Интересные линии можно получить за счёт комбинации светлых и тёмных границ. На рис. 2 показана таблица, в которой ячейки выделяются такими границами.
Рис. 2. Границы в таблице
К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).
Пример 2. Использование :last-child
| Значение | Значение по умолчанию | Описание |
|---|---|---|
| top | Да | Располагает заголовок по верхнему краю таблицы. |
| bottom | Нет | Заголовок располагается под таблицей. |
Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.
См. также
- Псевдокласс :first-child
- Псевдокласс :first-of-type
- Псевдокласс :last-child
- Псевдоклассы в CSS
CSS псевдокласс :first-child
Псевдокласс :first-child выбирает первый дочерний элемент своего родителя.
Селектор :first-of-type может быть использован для применения стиля к первому параграфу независимо от того, является он первым дочерним элементом или нет.
Версия
Синтаксис
:first-child
Пример
html> html> head> title>Заголовок документа title> style> p:first-child < background-color: #1c87c9; color:#fff; > style> head> body> p>Lorem Ipsum - это текст-"рыба". p> h2>Пример селектора first-child h2> p>Lorem Ipsum - это текст-"рыба". p> body> html>Рассмотрим другой пример:
Пример
html> html> head> title>Заголовок документа title> style> li:first-child < background: #8ebf42; > style> head> body> h2>Пример селектора :first-child h2> ul> li>Париж li> li>Москва li> li>Рим li> ul> ol> li>Париж li> li>Москва li> li>Рим li> ol> body> html>Поддержка браузера
| 4.0+ | 12.0+ | 2.0+ | 3.1+ | 10.0+ |