Css все дочерние элементы. Дочерние селекторы CSS. Вставка контента в DOM
Влад Мержевич
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 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. Какой элемент является родительским для тега 3. Для какого тега элемент выступает родителем?
1. Оливковый. 3. Ни для одного тега. Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку: Element >
ul {
padding-
top:
20px;
}
Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности. Селектор элемента дочернего имеет схожие свойства с понятием селектор потомка. Однако существует характерная черта, которая показывает принципиальное отличие данных операций. Оно заключается в том, что влияние селектора потомка распространяется на абсолютно все элементы, в то время как дочерний селектор подчиняет стили позиций первого уровня классификаций. Более наглядно оценить работу оператора дочернего селектора поможет следующий пример: Div >
р {
color:
#ff0000; /* красный */
}
<
div>
Данная строка будет иметь по умолчанию черный текст.
<
span>
Эта строка перекраситься в красный в следствие того,
что р является дочерним
тегом для дива.
span>
<
p>
Опять видим черные буквы.
<
span>
Здесь мы видим тоже черные символы,
так как
для этого спана родителем является тег р.
span>
p>
div>
Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности. Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье. Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек. Также селектор элемента дочернего используется для присвоения уникальных стилей элементам, родители которых уже известны за ранее. Другими словами: Main >
header
{
/* оформление относится только к главному хедеру */
}
Данный пример справедлив в тех случаях, когда тег header используют для выделения заголовков статей. В нашем случае мы задаем оформление только основному хедеру, и не задеваем второстепенные. Этот прием также позволяет избегать применения лишнего раза идентификаторов, что в свою очередь облегчает вес CSS-файла и делает его более читабельным. Таким образом, оператор дочернего элемента можно применять не только для оформления выпадающих меню, но и для небольшой оптимизации вашего интернет ресурса к работе поисковых роботов. Последнее обновление: 21.04.2016 Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы: :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 для выбора первых ссылок в блоках:
Стиль по селектору a:first-child применяется к ссылке, если она является первым дочерним элементом любого элемента. А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль. Используем псевдокласс last-child:
Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами. В первом блоке как раз последним дочерним элементом является ссылка. А вот во втором последним дочерним элементом является параграф, поэтому во
втором блоке стиль не применяется ни к одной из ссылок. Селектор :only-child
выбирает элементы, которые являются единственными дочерними элементами в контейнерах:
Текст1 Текст2 Текст3 Текст4 Параграфы с текстами "Текст1" и "Текст4" являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль - красный цвет шрифта. Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом
элементов других типов в этом же контейнере может быть сколько угодно.
Единственный параграф и элемент спан Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть
только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован. Псевдокласс nth-child
позволяет стилизовать каждый второй, третий элемент, только четные или только нечетные элементы и т.д. Например, стилизуем четные и нечетные строки таблицы:
Чтобы определить стиль для нечетных элементов, в селектор передается значение "odd": Tr:nth-child(odd){}
Для стилизации четных элементов в селектор передается значение "even": Tr:nth-child(even){}
Также в этот селектор мы можем передать номер стилизуемого элемента: Tr:nth-child(3) { background-color: #bbb; }
В данном случае стилизуется третья строка. Еще одну возможность представляет использование заменителя для номера, который выражается буквой n
: Tr:nth-child(2n+1) { background-color: #bbb; }
Здесь стиль применяется к каждой второй нечетной строке. Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс,
показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента. Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее. К примеру, если мы хотим выделить каждый третий элемент, начиная со второго, то мы могли бы написать: Tr:nth-child(3n+2) { background-color: #bbb; }
Псевдокласс :nth-last-child
по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца: Tr:nth-last-child(2) {
background-color: #bbb; /* 2 строка с конца, то есть предпоследняя */
}
tr:nth-last-child(2n+1) {
background-color: #eee; /* нечетные строки, начиная с конца */
}
Псевдокласс :nth-of-type
позволяет выбрать дочерний элемент определенного типа по определенному номеру: Tr:nth-of-type(2) {
background-color: #bbb;
}
Аналогично работает псевдокласс nth-last-of-type
, только теперь отсчет элементов идет с конца: Tr:nth-last-of-type(2n) {
background-color: #bbb;
}
Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем . И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад , когда jQuery набирал популярность. В этой статье я продемонстрирую возможности DOM по манипулированию HTML, сфокусировавшись на отношения родительских, дочерних и соседних элементов. В заключении я дам данные о поддержке этих возможностей в браузерах, но учитывайте, что библиотека типа jQuery по-прежнему остается хорошей опцией в силу наличия багов и непоследовательностей в реализации нативного функционала. Для демонстрации я буду использовать следующую разметку HTML, в течение статьи мы ее несколько раз изменим: 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 text Я могу изменить место расположения списка с помощью следующего кода: Var myList = document.getElementById("myList"),
container = document.getElementById("c");
container.appendChild(myList);
Итоговый DOM будет выглядеть следующим образом: Example text Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим 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 делают именно то, чего от них можно ожидать по их названию: выбирают первый и последний дочерние элементы. Вернемся к нашей разметке: Я могу выбрать первый и последний элементы с помощью этих свойств: 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. Давайте перейдем к похожей теме и взглянем на новые возможности по вставке контента. Во-первых, есть простой метод insertBefore() , он во многом похож на replaceChild() , принимает два аргумента и при этом работает как с новыми элементами, так и с существующими. Вот разметка: Example Paragraph Обратите внимание на параграф, я собираюсь сначала убрать его, а затем вставить перед списком, все одним махом: Var myList = document.getElementById("myList"),
container = document.getElementBy("c"),
myPar = document.getElementById("par");
container.insertBefore(myPar, myList);
В полученном HTML параграф будет перед списком и это еще один способ перенести элемент. Example Paragraph Как и replaceChild() , insertBefore() принимает два аргумента: добавляемый элемент и элемент, перед которым мы хотим его вставить. Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() . Я думаю, что многие знают о контекстных селекторах в CSS
. Они используются чаще всего, однако, опытные верстальщики прекрасно знают, что иногда контекстные селекторы вносят определённые проблемы. Это проблема связана с тем, что в структуре элемента может быть много одинаковых элементов, вложенных друг в друга. И необходимо применить стиль не для всех вложенных элементов, а только к непосредственно дочернему элементу. Вот для этого и используются дочерные селекторы в CSS
. Чтобы проблема стала более понятной, давайте приведу небольшой пример. Пусть у нас есть такой HTML-код
:
Первый абзац Второй абзац И наша задача сделать красным только "Второй абзац
". Если мы напишем с использованием контекстного селектора: Container p { То у нас станут красным оба абзаца, что нам совсем не нужно. Данная задача очень просто решается с помощью дочерних селекторов в CSS
: Container > p { Всё, теперь красным у нас стал только "Второй абзац
". Поскольку именно данный абзац является непосредственно дочерним для .container
. А "Первый абзац
" является дочерним для внутреннего div
, таким образом, под действие дочернего селектора он не попадает. Вот так легко решаются такие задачи, однако, есть один огромный минус дочерних селекторов в CSS
- они не работают в браузерах Internet Explorer
. По этой причине, их использование крайне нежелательно. Но если Вы вдруг где-нибудь встретите, то теперь Вы будете знать, что означает данный тип селекторов и что он делает.Вопросы для проверки
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
Ответы
Подробный анализ работы селектора дочернего элемента
Ограничение для применения оператора дочернего селектора
Зачем применяется
Подводя итоги
Псевдокласс first-child
Планшеты
Смартфоны
Псевдокласс last-child
Смартфоны
Планшеты
Селектор only-child
Заголовок
Псевдокласс only-of-type
Псевдокласс nth-child
Смартфоны
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 Псевдокласс nth-of-type
Подсчет дочерних узлов
Проверка существования дочерних узлов
Добавление и удаление дочерних элементов
Замена дочерних элементов
Выборка конкретных дочерних элементов
Вставка контента в DOM
color: red;
}
color: red;
}