Выбор первого дочернего элемента

Еще один статический псевдокласс, :first-child, применяется для выбора элементов, представляющих собой первые дочерние элементы других элементов. Назначение этого псевдокласса очень легко понять неправильно, поэтому требуется развернутый пример. Рассмотрим следующую разметку:


These are the necessary steps:



  • Insert key

  • Turn key clockwise

  • Push accelerator



Do not push the brake at the same time as the accelerator.




В данном примере первые дочерние элементы – это первый p, первый li и элементы strong и em. По следующим двум правилам:

p:first-child {font-weight: bold;}
li:first-child {text-transform: uppercase;}

получается результат.
Первое правило выделяет полужирным шрифтом любой элемент p, который является первым дочерним элементом другого элемента. Второе правило переводит в верхний регистр текст любого элемента li, являющегося первым дочерним элементом другого элемента (которыми в HTML должны быть элементы ol или ul).

Самая распространенная ошибка – полагать, что такой селектор, как p:first-child, выберет первый дочерний элемент элемента p.


Однако вспомните природу псевдоклассов, которая состоит в подключении к ассоциированному с псевдоклассом элементу фантомного класса некоторого типа. Если бы было необходимо добавить в разметку реальные классы, это выглядело бы так:


These are the necessary steps:



  • Insert key

  • Turn key clockwise

  • Push accelerator



Do not push the brake at the same time
as the accelerator.




Следовательно, для того чтобы выбрать элементы em, являющиеся первыми дочерними элементами другого элемента, нужна запись em:first-child. Этот селектор позволяет, например, оформлять первый элемент списка, первый абзац элемента div или первый элемент td в строке таблицы. Internet Explorer для Windows вплоть до версии IE6 не поддерживает :first-child, а IE7 поддерживает :first-child.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор по частичному значению атрибута

Вернуться в раздел: CSS / 2. Селекторы