First child css что это

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

Псевдоклассы группы child

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

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Светлана Коробцева ,
• Антон Капустинский ,
• Юлия Макарова

Обновлено 21 ноября 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.

Пример

Скопировать ссылку «Пример» Скопировано

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

У всех пунктов списка будет синий фон:

 .list-item  background-color: #2E9AFF;> .list-item  background-color: #2E9AFF; >    Скопировать Скопировано Не удалось скопировать   

У первого пункта списка (первого дочернего элемента) будет фиолетовый:

 .list-item:first-child  background-color: #C56FFF;> .list-item:first-child  background-color: #C56FFF; >    Скопировать Скопировано Не удалось скопировать   

У последнего пункта списка (последнего дочернего элемента) будет оранжевый фон:

 .list-item:last-child  background-color: #FF8630;> .list-item:last-child  background-color: #FF8630; >    Скопировать Скопировано Не удалось скопировать   

У второго пункта списка будет зелёный фон:

 .list-item:nth-child(2)  background-color: #41E847;> .list-item:nth-child(2)  background-color: #41E847; >    Скопировать Скопировано Не удалось скопировать   

У предпоследнего пункта списка будет розовый фон:

 .list-item:nth-last-child(2)  background-color: #F498AD;> .list-item:nth-last-child(2)  background-color: #F498AD; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Есть три суперпростых по своей логике работы псевдокласса из этого набора:

• :only — child — выбирает любой элемент, который является единственным дочерним элементом своего родителя. Можно имитировать аналогичное поведение следующими комбинациями: :first — child : last — child или :nth — child ( 1 ) : nth — last — child ( 1 ) , но зачем так сложно, если можно проще?
• :first — child — выбирает первый дочерний элемент в родителе.
• :last — child — выбирает последний дочерний элемент в родителе.

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

Звучит сложнее, чем работает. Начнём с простого, с ключевых слов:

• :nth — child ( odd ) — выбирает нечётные элементы внутри родителя, подходящие под левую часть селектора.
• :nth — child ( even ) — выбирает чётные элементы внутри родителя, подходящие под левую часть селектора.

В круглых скобках мы можем указать просто цифру. Таким образом будет выбран соответствующий этой цифре дочерний элемент. Например, :nth — child ( 3 ) выберет третий дочерний элемент, подходящий под левую часть селектора.

Но всё становится гораздо интереснее, когда мы хотим выбрать, к примеру, каждый третий элемент внутри родителя. Используем для этого формулу :nth — child ( 3n ) . Вместо n будет подставляться 0, затем 1, 2 и так далее. В результате умножения в скобки будет подставляться 0, 3, 6, 9, и так до тех пор, пока не закончатся дочерние элементы внутри родителя.

Пойдём дальше и попробуем выбрать каждый шестой элемент, начиная с десятого. Тут нам к умножению на n нужно будет прибавить ещё 10, чтобы отсчёт начался не с 0, а с 10: nth — child ( 6n+10 ) .

Псевдокласс :nth — last — child работает абсолютно аналогично, только счёт ведётся с конца.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Часто начинающие разработчики пытаются применить эти псевдоклассы к родительскому элементу. Но тут необходимо просто запомнить, что нужно применять псевдоклассы именно к дочерним элементам, из списка которых надо выбрать. При расчёте порядкового номера дочернего элемента учитываются все соседние дочерние элементы, находящиеся на одном уровне с элементом, к которому мы применяем псевдокласс :nth — child , вне зависимости от класса и типа элемента.

�� Часто не получается сразу в уме составить правильную формулу. Не надо стесняться пользоваться калькулятором NTH.

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+

Псевдокласс first-child. Как выбрать первый элемент в контейнере с помощью CSS.

Представьте себе какой-то элемент на странице, в который вложены несколько других элементов.

Это может выглядеть вот так:

Элемент 1
 
Элемент 1
 
Элемент 3
 

Причем, количество вложенных элементов может постоянно меняться, например, программным способом (скриптами).

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

С появлением CSS3 и модуля «Селекторы» такие обращения к элементу стали возможными.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Для этого используется специальный селектор, псевдокласс first-child. С его помощью выбирается первый, по очередности расположения в коде, дочерний элемент, который располагается в родительском элементе.

Синтаксис здесь простой:

элемент: first-child

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

#main p:first-child

Этой записью мы сообщаем о том, что в родительском элементе #main, необходимо найти элемент «p», который расположен в коде выше всех.

Будет выделен «Элемент 1».

Кроме того, аналогичным образом можно выделить последний элемент в родительском. Прочитайте еще про псевдокласс last-child.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: