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

Как обратиться ко второму дочернему элементу 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 , только теперь отсчет элементов идет с конца:

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

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис

Значения

odd Все нечетные номера элементов. even Все четные номера элементов. число Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. выражение Задается в виде an+b , где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2.

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

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

Табл. 1. Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child .
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even .
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd .
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

HTML5 CSS3 IE Cr Op Sa Fx

        
 
 
2134
2135
 
2136
2137
2138
 
 
Нефть
16
34
 
62
74
57
 
 
Золото
4
69
 
72
56
47
 
 
Дерево
7
73
 
79
34
86
 
 
Камни
23
34
 
88
53
103
 
 
  

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех четных строк (рис. 1).

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

Комбинации селекторов

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

Группирование селекторов (А, B)

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

Пример 1. Стиль для каждого селектора

h1 < font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; color: #003; >h2 < font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; color: #333; >h3 < font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; color: #900; >p

Из данного примера видно, что стиль для элементов , , содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.

Пример 2. Сгруппированные селекторы

h1, h2, h3 < font-family: Arial, Helvetica, sans-serif; >h1 < font-size: 1.6rem; color: #003; >h2 < font-size: 1.3rem; color: #333; >h3

В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.

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

h2, .block, .msg

Здесь свойство background применяется одновременно к элементу и к классам block и msg .

Дерево документа

Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.

Пример 3. Код HTML

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

Рис. 1. Дерево документа

не считается элементом, поэтому его в расчёт не берём. Сама схема начинается с элемента , он называется «корневой элемент». Все элементы связаны друг с другом сверху вниз и между ними есть следующие связи.

, поскольку располагается внутри них. Родитель Непосредственный предок элемента, который располагается выше на один уровень в дереве документа. будет родителем для
, но уже не для
• , для него родителем будет выступать
  . Ребёнок (дочерний элемент) Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для будет элемент

  ; для

  дочерними элементами выступают
  • , но не . У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель. Братья (сиблинги) Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы , и , а также
  • . Элементы братскими не являются из-за того, что у них разные родители. Смежные Братские элементы, расположенные рядом друг с другом. Смежными будут элементы и , а также и , но никак не и , потому что они располагаются «через одного».

  Селекторы потомка (A B)

  Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.

  footer a

  Пример 4. Цвет ссылок

  Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a , а для ссылок внизу — footer a .

  

  Рис. 2. Ссылки разного цвета

  Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.

  .tbl thead td

  Дочерние селекторы (A > B)

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

  section > h2

  Данная запись означает применить стиль к элементу , который является дочерним по отношению к . Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок , поскольку только он непосредственно располагается внутри и выступает его дочерним элементом.

   
  Заголовок 1
   
  Заголовок 2
   
   

  располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.

  Пример 5. Дочерние селекторы

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

  

  Рис. 3. Изменение стиля дочерних элементов

  Смежные селекторы (A + B)

  Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.

  h2 + p

  Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none . При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.

  Пример 6. Смежные элементы

  Братские селекторы (A ~ B)

  Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.

  h2 ~ p

  В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl . Это меняет текст и расположение элементов справа налево.

  Пример 7. Братские селекторы

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

  

  Рис. 4. Использование братского селектора

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

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

  Похожие публикации:
  1. Как запретить удаление приложений на андроид
  2. Как зарегистрировать домен анонимно
  3. Как сделать из модема флешку
  4. Как установить virtualbox на debian 10