Дочерние селекторы CSS. Техники работы с DOM: родительские, дочерние и соседние элементы Css все дочерние элементы
Описание
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Синтаксис
элемент:nth-child(odd | even | <число> | <выражение>) {...}
Значения
odd Все нечетные номера элементов. even Все четные номера элементов. число Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. выражение Задается в виде an+b , где a и b целые числа, а n - счетчик, который автоматически принимает значение 0, 1, 2...Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
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).
Дочерние элементы - это элементы, которые располагаются непосредственно внутри родительского элемента. Обратите внимание на слова: непосредственно внутри.
Давайте рассмотрим пример простого html-кода:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
В этом коде два абзаца. Внутри абзацев расположены строчные элементы , и . Во втором абзаце тег вложен в тег .
Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.
Синтаксис дочерних селекторов:
Селектор 1 > Селектор 2 { Свойство: значение; }
Вот обновлённый код:
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
Итак, вспомним: дочерний элемент - это элемент вложенный непосредственно в родительский. То есть, дочерний элемент - это потомок первого уровня. Давайте обратим внимание на тег , в первом абзаце он вложен в тег
А во втором он вложен в тег , хотя также является потомком тега
Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color : blue ; } не сработает - наклонный текст второго абзаца не будет отображён синим цветом.
Рисунок 1. Работа примера №1.
Добраться к html-элементу второго абзаца можно используя CSS-правило: p>u>i { color : blue ; }.
Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый и наклонный элементы.
Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.
Рисунок 2. Работа примера №2.
Более сложный пример
У нас есть html-код:
По умолчанию он интерпритируется так:
Задача: при помощи CSS превратить этот список в горизонтальное меню.
Рисунок 3. Цель преобразований.
Вот решение этой задачи с использованием дочерних селекторов:
Для лучшего понимания этого примера читайте.
Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем . И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад , когда jQuery набирал популярность.
В этой статье я продемонстрирую возможности DOM по манипулированию HTML, сфокусировавшись на отношения родительских, дочерних и соседних элементов. В заключении я дам данные о поддержке этих возможностей в браузерах, но учитывайте, что библиотека типа jQuery по-прежнему остается хорошей опцией в силу наличия багов и непоследовательностей в реализации нативного функционала.
Подсчет дочерних узлов
Для демонстрации я буду использовать следующую разметку HTML, в течение статьи мы ее несколько раз изменим:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6
Как видите, результаты одинаковые, хотя техники используются разные. В первом случае я использую свойство children . Это свойство только для чтения, оно возвращает коллекцию элементов HTML, находящихся внутри запрашиваемого элемента; для подсчета их количества я использую свойство length этой коллекции.
Во втором примере я использую метод childElementCount , который мне кажется более аккуратным и потенциально более поддерживаемым способом (подробнее обсудим это позже, я не думаю, что у вас возникнут проблемы с пониманием того, что он делает).
Я мог бы попытаться использовать childNodes.length (вместо children.length), но посмотрите на результат:
Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13
Он возвращает 13, потому что childNodes это коллекция всех узлов, включая пробелы - учитывайте это, если вам важна разница между дочерними узлами и дочерними узлами-элементами.
Проверка существования дочерних узлов
Для проверки наличия у элемента дочерних узлов я могу использовать метод hasChildNodes() . Метод возвращает логическое значение, сообщающие об их наличии или отсутствии:
Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // true
Я знаю, что в моем списке есть дочерние узлы, но я могу изменить HTML так, чтобы их не было; теперь разметка выглядит так:
И вот результат нового запуска hasChildNodes() :
Console.log(myList.hasChildNodes()); // true
Метод по прежнему возвращает true . Хотя список не содержит никаких элементов, в нем есть пробел, являющийся валидным типом узла. Данный метод учитывает все узлы, не только узлы-элементы. Чтобы hasChildNodes() вернул false нам надо еще раз изменить разметку:
И теперь в консоль выводится ожидаемый результат:
Console.log(myList.hasChildNodes()); // false
Конечно, если я знаю, что могу столкнуться с пробелом, то сначала я проверю существование дочерних узлов, затем с помощью свойства nodeType определяю, есть ли среди них узлы-элементы.
Добавление и удаление дочерних элементов
Есть техника, которые можно использовать для добавления и удаления элементов из DOM. Наиболее известная из них основана на сочетании методов createElement() и appendChild() .
Var myEl = document.createElement("div"); document.body.appendChild(myEl);
В данном случае я создаю
Но вместо вставки специально создаваемого элемента, я также могу использовать appendChild() и просто переместить существующий элемент. Предположим, у нас следующая разметка:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Example text
Я могу изменить место расположения списка с помощью следующего кода:
Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.appendChild(myList);
Итоговый DOM будет выглядеть следующим образом:
Example text
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим body . И хотя обычно метод appendChild() используется для добавления элементов созданных с помощью createElement() , он также может использоваться для перемещения существующих элементов.
Я также могу полностью удалить дочерний элемент из DOM с помощью removeChild() . Вот как удаляется наш список из предыдущего примера:
Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);
Теперь элемент удален. Метод removeChild() возвращает удаленный элемент и я могу его сохранить на случай, если он потребуется мне позже.
Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);
Таке существует метод ChildNode.remove() , относительно недавно добавленный в спецификацию:
Var myList = document.getElementById("myList"); myList.remove();
Этот метод не возвращает удаленный объект и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.
Замена дочерних элементов
Я могу заменить существующий дочерний элемент новым, независимо от того, существует ли этот новый элемент или я создал его с нуля. Вот разметка:
Example Text
Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "example"; myDiv.appendChild(document.createTextNode("New element text")); document.body.replaceChild(myDiv, myPar);
Как видите, метод replaceChild() принимает два аргумента: новый элемент и заменяемый им старый элемент.
Я также могу использовать это метод для перемещения существующего элемента. Взгляните на следующий HTML:
Example text 1
Example text 2
Example text 3
Я могу заменить третий параграф первым параграфом с помощью следующего кода:
Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);
Теперь сгенерированный DOM выглядит так:
Example text 2
Example text 1
Выборка конкретных дочерних элементов
Существует несколько разных способов выбора конкретного элемента. Как показано ранее, я могу начать с использования коллекции children или свойства childNodes . Но взглянем на другие варианты:
Свойства firstElementChild и lastElementChild делают именно то, чего от них можно ожидать по их названию: выбирают первый и последний дочерние элементы. Вернемся к нашей разметке:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Я могу выбрать первый и последний элементы с помощью этих свойств:
Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Example one" console.log(myList.lastElementChild.innerHTML); // "Example six"
Я также могу использовать свойства previousElementSibling и nextElementSibling , если я хочу выбрать дочерние элементы, отличные от первого или последнего. Это делается сочетанием свойств firstElementChild и lastElementChild:
Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"
Также есть сходные свойства firstChild , lastChild , previousSibling , и nextSibling , но они учитывают все типы узлов, а не только элементы. Как правило, свойства, учитывающие только узлы-элементы полезнее тех, которые выбирают все узлы.
Вставка контента в DOM
Я уже рассматривал способы вставки элементов в DOM. Давайте перейдем к похожей теме и взглянем на новые возможности по вставке контента.
Во-первых, есть простой метод insertBefore() , он во многом похож на replaceChild() , принимает два аргумента и при этом работает как с новыми элементами, так и с существующими. Вот разметка:
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Example Paragraph
Обратите внимание на параграф, я собираюсь сначала убрать его, а затем вставить перед списком, все одним махом:
Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);
В полученном HTML параграф будет перед списком и это еще один способ перенести элемент.
Example Paragraph
- Example one
- Example two
- Example three
- Example four
- Example five
- Example Six
Как и replaceChild() , insertBefore() принимает два аргумента: добавляемый элемент и элемент, перед которым мы хотим его вставить.
Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() .
Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку:
Element > ul { padding- top: 20px; }
Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности.
Подробный анализ работы селектора дочернего элемента
Селектор элемента дочернего имеет схожие свойства с понятием селектор потомка. Однако существует характерная черта, которая показывает принципиальное отличие данных операций. Оно заключается в том, что влияние селектора потомка распространяется на абсолютно все элементы, в то время как дочерний селектор подчиняет стили позиций первого уровня классификаций.
Более наглядно оценить работу оператора дочернего селектора поможет следующий пример:
Div > р { color: #ff0000; /* красный */ }
< div> Данная строка будет иметь по умолчанию черный текст. < span> Эта строка перекраситься в красный в следствие того, что р является дочерним тегом для дива. < p> Опять видим черные буквы. < span> Здесь мы видим тоже черные символы, так как для этого спана родителем является тег р.
Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности.
Ограничение для применения оператора дочернего селектора
Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье.
Зачем применяется
Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек.
Также селектор элемента дочернего используется для присвоения уникальных стилей элементам, родители которых уже известны за ранее. Другими словами:
Main > header { /* оформление относится только к главному хедеру */ }
Данный пример справедлив в тех случаях, когда тег header используют для выделения заголовков статей. В нашем случае мы задаем оформление только основному хедеру, и не задеваем второстепенные. Этот прием также позволяет избегать применения лишнего раза идентификаторов, что в свою очередь облегчает вес CSS-файла и делает его более читабельным.
Подводя итоги
Таким образом, оператор дочернего элемента можно применять не только для оформления выпадающих меню, но и для небольшой оптимизации вашего интернет ресурса к работе поисковых роботов.
Влад Мержевич
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5 CSS 2.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.
В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 12.1).
Рис. 12.1. Дерево элементов для примера
На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия. Здесь дочерним элементом по отношению к тегу
Вместе с тем тег
не является дочерним для тега Вернёмся теперь к селекторам. Дочерним селектором считается такой, который
в дереве элементов находится прямо внутри родительского элемента. Синтаксис
применения таких селекторов следующий. Селектор 1 > Селектор 2 { Описание правил стиля } Стиль применяется к Селектору 2, но только в том случае, если он является
дочерним для Селектора 1. Если снова обратиться к примеру 12.1, то стиль вида P
> EM { color: red }
будет установлен для первого абзаца документа,
поскольку тег
находится внутри контейнера И не даст никакого результата для второго
абзаца. А все из-за того, что тег
во втором
абзаце расположен в контейнере
, поэтому
нарушается условие вложенности. По своей логике дочерние селекторы похожи на селекторы контекстные. Разница
между ними следующая. Стиль к дочернему селектору применяется только в том случае,
когда он является прямым потомком, иными словами, непосредственно располагается
внутри родительского элемента. Для контекстного селектора же допустим любой уровень
вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2). Пример 12.2. Контекстные и дочерние селекторы HTML5
CSS 2.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. Результат данного примера показан на рис. 12.2. Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора На тег
в примере действуют одновременно два правила: контекстный селектор (тег
расположен внутри
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I
ниже, как цвет текста изменится с красного на зеленый. Заметим, что в большинстве случаев от добавления дочерних селекторов можно
отказаться, заменив их контекстными селекторами. Однако использование дочерних
селекторов расширяет возможности по управлению стилями элементов, что в итоге
позволяет получить нужный результат, а также простой и наглядный код. Удобнее всего применять указанные селекторы для элементов, которые обладают
иерархической структурой — сюда относятся, например, таблицы и разные списки.
В примере 12.3 показано изменение вида списка с помощью стилей. За счёт
вложения одного списка в другой получаем разновидность меню. Заголовки при этом
располагаются горизонтально, а набор ссылок — вертикально под заголовками
(рис. 12.3). Рис. 12.3. Список в виде меню Для размещения текста по горизонтали к селектору LI
добавляется стилевое свойство float
. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3). Пример 12.3. Использование дочерних селекторов HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться. 1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам. При использовании следующего стиля?
P { color: green; } 2. Какой элемент является родительским для тега 
Вопросы для проверки
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }