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-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

Css как обратиться к дочернему элементу

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

 
Заголовок
 
Текст
 
  

Хотя вложенными в элемент body элементами являются целых три — h2, div, p, но дочерними из них являются только два — div и h2, так как они находятся в первом уровне вложенности. А элемент p находится на втором уровне вложенности, так как вложен внутрь элемента div, а не просто элемента body.

Для обращения к дочерним элементам используется знак угловой скобки:

     .article > p  
Аннотация к статье
 
Текст статьи
 
 
   

В блоке с классом article есть два параграфа. Селектор .article > p выбирает только те параграфы, который находятся непосредственно в блоке article:

Если бы мы использовали другой селектор без символа >

.article p

Тогда стиль бы применялся ко всем параграфам на всех уровнях вложенности:

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

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

div p

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

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

div>p

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

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

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

Синтаксис

Значения

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

       
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. Ссылки с линией слева