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

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

  • автор:

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

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

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

 

Роль цитокинов при дорсалгии

Автор: Гордон Фримен, канд. физ.-мат. наук

Содержание статьи

Почта: freemen@blackmesa.com

Опубликовано:

Псевдокласс :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 раз.
# Повторять один или больше раз через запятую. #

Пример

first-child

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

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

    Селекторы в CSS3 a:first-child 

Планшеты

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL

Смартфоны

Топ-смартфоны 2016

Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Селектор first-child в CSS 3

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

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

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

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

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

    Селекторы в CSS3 a:last-child 

Смартфоны

Samsung Galaxy S7
Apple iPhone SE
Huawei P9

Планшеты

Microsoft Surface Pro 4
Apple iPad Pro
ASUS ZenPad Z380KL

Данные за 2016

Селектор last-child в CSS 3

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

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

Селектор only-child

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

    Селекторы в CSS3 p:only-child 

Заголовок

Текст1

Текст2

Текст3

Текст4

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

Селектор only-child в CSS 3

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

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

    Селекторы в CSS3    
Header

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

Footer

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

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

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

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

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

    Селекторы в CSS3 tr:nth-child(odd) < background-color: #bbb; >tr:nth-child(even) 

Смартфоны

SamsungGalaxy S7 Edge60000
AppleiPhone SE39000
MicrosoftLumia 65013500
AlcatelIdol S430000
HuaweiP960000
HTCHTC 1050000
MeizuPro 640000
XiaomiMi535000

Селектор nth-child в CSS 3

Чтобы определить стиль для нечетных элементов, в селектор передается значение «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-child в CSS

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

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

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

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

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

tr:nth-of-type(2)

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

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

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

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

 

Роль цитокинов при дорсалгии

Автор: Гордон Фримен, канд. физ.-мат. наук

Содержание статьи

Почта: freemen@blackmesa.com

Опубликовано:

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

и они и будут выбраны.

article :last-child

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

.

article p:last-child

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

article h1:last-child

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

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

Синтаксис

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

Пример

Результат примера показан на рис. 1. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента , расположенного внутри контейнера с именем класса block . Это позволило создать цветную полосу внизу блока без включения новых классов.

Результат использования псевдокласса :last-child

Рис. 1. Результат использования псевдокласса :last-child

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

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

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

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

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

Браузеры

9 12 1 9.5 3.2 1
2.1 1 10 3.2

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

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

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

См. также

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

Навигация по DOM-элементам

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

Все операции с DOM начинаются с объекта document . Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.

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

Поговорим об этом подробнее.

Сверху: documentElement и body

Самые верхние элементы дерева доступны как свойства объекта document :

= document.documentElement Самый верхний узел документа: document.documentElement . В DOM он соответствует тегу . = document.body Другой часто используемый DOM-узел – узел тега : document.body . = document.head Тег доступен как document.head .

Есть одна тонкость: document.body может быть равен null

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

В частности, если скрипт находится в , document.body в нём недоступен, потому что браузер его ещё не прочитал.

Поэтому, в примере ниже первый alert выведет null :

        

В мире DOM null означает «не существует»

В DOM значение null значит «не существует» или «нет такого узла».

Дети: childNodes, firstChild, lastChild

Здесь и далее мы будем использовать два принципиально разных термина:

  • Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например, и являются детьми элемента .
  • Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.

    (и несколько пустых текстовых узлов):

    и вложенные в них:
    (ребёнок

      ) и (ребёнок
      ) – в общем, все элементы поддерева.

    Коллекция childNodes содержит список всех детей, включая текстовые узлы.

    Пример ниже последовательно выведет детей document.body :

    Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент . На самом деле, в документе есть ещё «какой-то HTML-код», но на момент выполнения скрипта браузер ещё до него не дошёл, поэтому скрипт не видит его.

    Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему элементу.

    Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:

    elem.childNodes[0] === elem.firstChild elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

    Для проверки наличия дочерних узлов существует также специальная функция elem.hasChildNodes() .

    DOM-коллекции

    Как мы уже видели, childNodes похож на массив. На самом деле это не массив, а коллекция – особый перебираемый объект-псевдомассив.

    И есть два важных следствия из этого:

    1. Для перебора коллекции мы можем использовать for..of :
    for (let node of document.body.childNodes) < alert(node); // покажет все узлы из коллекции >

    Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод Symbol.iterator ).

    1. Методы массивов не будут работать, потому что коллекция – это не массив:
    alert(document.body.childNodes.filter); // undefined (у коллекции нет метода filter!)

    Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя Array.from :

    alert( Array.from(document.body.childNodes).filter ); // сделали массив

    DOM-коллекции – только для чтения

    DOM-коллекции, и даже более – все навигационные свойства, перечисленные в этой главе, доступны только для чтения.

    Мы не можем заменить один дочерний узел на другой, просто написав childNodes[i] = . .

    Для изменения DOM требуются другие методы. Мы увидим их в следующей главе.

    DOM-коллекции живые

    Почти все DOM-коллекции, за небольшим исключением, живые. Другими словами, они отражают текущее состояние DOM.

    Если мы сохраним ссылку на elem.childNodes и добавим/удалим узлы в DOM, то они появятся в сохранённой коллекции автоматически.

    Не используйте цикл for..in для перебора коллекций

    Коллекции перебираются циклом for..of . Некоторые начинающие разработчики пытаются использовать для этого цикл for..in .

    Не делайте так. Цикл for..in перебирает все перечисляемые свойства. А у коллекций есть некоторые «лишние», редко используемые свойства, которые обычно нам не нужны:

       

    Соседи и родитель

    Соседи – это узлы, у которых один и тот же родитель.

    Например, здесь и соседи:

    • говорят, что – «следующий» или «правый» сосед
    • также можно сказать, что «предыдущий» или «левый» сосед .

    Следующий узел того же родителя (следующий сосед) – в свойстве nextSibling , а предыдущий – в previousSibling .

    Родитель доступен через parentNode .

    // родителем является alert( document.body.parentNode === document.documentElement ); // выведет true // после идёт alert( document.head.nextSibling ); // HTMLBodyElement // перед находится alert( document.body.previousSibling ); // HTMLHeadElement

    Навигация только по элементам

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

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

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

    Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element :

    • children – коллекция детей, которые являются элементами.
    • firstElementChild , lastElementChild – первый и последний дочерний элемент.
    • previousElementSibling , nextElementSibling – соседи-элементы.
    • parentElement – родитель-элемент.

    Зачем нужен parentElement ? Разве может родитель быть не элементом?

    Свойство parentElement возвращает родитель-элемент, а parentNode возвращает «любого родителя». Обычно эти свойства одинаковы: они оба получают родителя.

    За исключением document.documentElement :

    alert( document.documentElement.parentNode ); // выведет document alert( document.documentElement.parentElement ); // выведет null

    Причина в том, что родителем корневого узла document.documentElement ( ) является document . Но document – это не узел-элемент, так что parentNode вернёт его, а parentElement нет.

    Эта деталь может быть полезна, если мы хотим пройти вверх по цепочке родителей от произвольного элемента elem к , но не до document :

    while(elem = elem.parentElement) < // идти наверх до alert( elem ); >

    Изменим один из примеров выше: заменим childNodes на children . Теперь цикл выводит только элементы:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *