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

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

Обратиться к первому элементу внутри родителя можно с помощью псевдокласса :first-child .

Например, мы хотим поменять цвет шрифта у первого параграфа:

  Параграф 1 Параграф 2 Параграф 3  

div p:first-child  color: red; > 

Цвет у первого параграфа поменяется на красный.

:first-child

CSS псевдокласс :first-child находит любой элемент, являющийся первым в своём родителе.

/* Выбирает любой 
, который является первым элементом среди своих братьев и сестёр */ p:first-child  color: lime; > 

Примечание: Как изначально определено, выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это больше не требуется.

Синтаксис

Error: could not find syntax for this item

Примеры

Простой пример

HTML

div> p>This text is selected!p> p>This text isn't selected.p> div> div> h2>This text isn't selected: it's not a `p`.h2> p>This text isn't selected.p> div> 

CSS

p:first-child  color: lime; background-color: black; padding: 5px; > 

Результат

Стилизация списка

HTML

ul> li>Item 1li> li>Item 2li> li> Item 3 ul> li>Item 3.1li> li>Item 3.2li> li>Item 3.3li> ul> li> ul> 

CSS

ul li  color: blue; > ul li:first-child  color: red; font-weight: bold; > 

Результат

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

Specification
Selectors Level 4 # first-child-pseudo

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

• :-moz-first-node (en-US) Non-standard
• :first-of-type
• :last-child
• :nth-child()

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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

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

div p

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

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

div>p

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