Как обратиться к первому дочернему элементу css

Как обращаться к дочернему элементу в css?

Если вы укажете div p , то стиль будет применен ко всем p внутри div , независимо от степени вложенности.

div p

 
Просто текст
 
Еще текст
 
Опять текст
 
 
 
Тут что-то написано
 
И тут что-то написано

А если укажете div>p , то стиль будет применен, только к «прямым» дочерним элементам «первой степени вложенности», обратите внимание, тут для p , который внутри section стиль не применился, хотя он тоже внутри div , но он вложен еще в другой элемент

div>p

 
Просто текст
 
Еще текст
 
Опять текст
 
 
 
Тут что-то написано
 
И тут что-то написано

Как обратиться к первому дочернему элементу css

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

• :first-child : представляет элемент, который является первым дочерним элементом
• :last-child : представляет элемент, который является последним дочерним элементом
• :only-child : представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере
• :only-of-type : выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере
• :nth-child(n) : представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент
• :nth-last-child(n) : представляет дочерний элемент, который имеет определенный номер n, начиная с конца
• :nth-of-type(n) : выбирает дочерний элемент определенного типа, который имеет определенный номер
• :nth-last-of-type(n) : выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Используем псевдокласс first-child для выбора первых ссылок в блоках:

     a:first-child 
Планшеты
 
Microsoft Surface Pro 4 
Apple iPad Pro 
ASUS ZenPad Z380KL 
 
Смартфоны
 
Топ-смартфоны 2016
 Samsung Galaxy S7 
Apple iPhone SE 
Huawei P9 
   

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

В первом блоке элемент ссылки является первым дочерним элементом, поэтому к нему применяется определенный стиль.

А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.

Псевдокласс last-child

Используем псевдокласс last-child :

     a:last-child 
Смартфоны
 
Samsung Galaxy S7 
Apple iPhone SE 
Huawei P9 
 
Планшеты
 
Microsoft Surface Pro 4 
Apple iPad Pro 
ASUS ZenPad Z380KL 
Данные за 2016
 
   

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

В первом блоке как раз последним дочерним элементом является ссылка. А вот во втором последним дочерним элементом является параграф, поэтому во втором блоке стиль не применяется ни к одной из ссылок.

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:

     p:only-child 
Заголовок
 
Текст1





 
 
Текст2
 
Текст3
 
 
Текст4
 
   

Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.

Псевдокласс only-of-type

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.

        
Header
 
Единственный параграф и элемент спан
 
Footer
   

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.

Псевдокласс nth-child

Псевдокласс nth-child позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д.

Например, стилизуем четные и нечетные строки таблицы:

     tr:nth-child(odd) < background-color: #bbb; >tr:nth-child(even) 
Смартфоны
 
Samsung
Galaxy S7 Edge
60000
 
Apple
iPhone SE
39000
 
Microsoft
Lumia 650
13500
 
Alcatel
Idol S4
30000
 
Huawei
P9
60000
 
HTC
HTC 10
50000
 
Meizu
Pro 6
40000
 
Xiaomi
Mi5
35000
 
   

Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:

tr:nth-child(odd)<>

Для стилизации четных элементов в селектор передается значение «even»:

tr:nth-child(even)<>

Также в этот селектор мы можем передать номер стилизуемого элемента:

tr:nth-child(3)

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n :

tr:nth-child(2n+1)

Здесь стиль применяется к каждой второй нечетной строке.

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.

К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать:

tr:nth-child(3n+2)

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:

tr:nth-last-child(2) < background-color: #bbb; /* 2 строка с конца, то есть предпоследняя */ >tr:nth-last-child(2n+1) < background-color: #eee; /* нечетные строки, начиная с конца */ >

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:

tr:nth-of-type(2)

Аналогично работает псевдокласс nth-last-of-type , только теперь отсчет элементов идет с конца:

Псевдокласс :first-child

Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).

В качестве примера рассмотрим следующий код HTML:

 
Роль цитокинов при дорсалгии
 
Автор: Гордон Фримен, канд. физ.-мат. наук
 
Содержание статьи
 
Почта: freemen@blackmesa.com
 
Опубликовано: 27 ноября 2018
 

Псевдокласс :first-child без указания селектора выберет все первые элементы внутри и установит для них красный цвет текста. Здесь первыми идут и , они и будут выбраны.

article :first-child

При добавлении селектора к :first-child сперва берётся первый элемент, затем смотрится какого он типа. Если элемент совпадает с указанным селектором, то он будет выбран. Таким образом, выбирается элемент, если он удовлетворяет двум условиям одновременно: это первый элемент и это элемент указанного типа. Здесь красным цветом будет выделен заголовок, поскольку первым идёт именно .

article h1:first-child

Если вместо h1 использовать другой селектор, то ничего выбрано не будет, поскольку не выполняется условие «первый элемент это

».

article p:first-child

Для выбора первого элемента определённого типа используйте псевдокласс :first-of-type.

Вместо :first-child допустимо использовать :nth-of-child(1).

Синтаксис

Селектор:first-child

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Пример

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. Выделение цветом первого дочернего элемента абзаца

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

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

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

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

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

7

12

4

9.5

4

3

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

• :first-child и :last-child
• :first-of-type и :last-of-type
• Псевдокласс :first-of-type
• Псевдокласс :last-child
• Псевдоклассы в CSS

Часть 3. Дочерние селекторы CSS. Дополнительные псевдоклассы

Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.

Дочерние селекторы CSS

В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам

, которые являются дочерними по отношению к , не затрагивая остальные

(например,

, дочерние по отношению к ).
Как это сделать? Очень просто: создадим дочерний селектор:

body > p

Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов

родителя . Если символ убрать, то стиль применится абсолютно ко всем тегам

, которые находятся внутри тега , хотя они могут и не являться для него дочерними.

Дополнительные псевдоклассы

В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».

• :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым дочерним элементом своего родителя;
• :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
• :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
• :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
• :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
• :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа;
• :nth-of-type – по принципу работы похож на :nth-child , но ориентируется на тип элемента;
• :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа.

Пример использования :first-child, :last-child и :nth-child

  
Первый ребенок
 
Второй ребенок
 
Третий ребенок
 
 
Нечетный номер
 
 
Четный номер
 
 
Нечетный номер
 
 
Четный номер
 
 
 
Последний ребенок
 
 

/* CSS */ p:first-child < font-weight: bold; text-transform: uppercase; >p:last-child < font-style: italic; font-size: 0.8em; >p:nth-child(3) < color: red; >tr:nth-child(odd) < background-color: #A2DED0; >tr:nth-child(even)

Первое правило – p:first-child – касается элемента p : если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега добавить еще какой-нибудь тег (к примеру, ), то стиль p:first-child уже не будет отображаться, поскольку

перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

лишь тогда, когда он будет являться последним дочерним элементом своего родителя. Добавьте после

любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега

(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования :first-of-type, :last-of-type, :nth-of-type и :only-of-type

  
Первый ребенок
 
Второй ребенок
 
Третий ребенок
 
Четвертый ребенок
 
Пятый ребенок
 
Последний ребенок
 
 

/* CSS */ p:first-of-type < color: violet; text-transform: uppercase; >p:last-of-type < font-style: italic; font-size: 0.8em; >p:nth-of-type(3) < color: red; >p:nth-of-type(odd) < background-color: #A2DED0; >p:nth-of-type(even) < background-color: #C8F7C5; >h3:only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами :first-child и :first-of-type .

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

есть еще и тег , присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child ).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу

, который по факту является пятым ребенком тега . Но если не брать во внимание элементы других типов, то получается, что тег

с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега , делая текст подчеркнутым. Данный стиль работает лишь потому, что тег является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег , стиль не будет применён.

Выводы

Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

С помощью дополнительных псевдоклассов :first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.

Псевдоклассы :first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.