Техники работы с DOM: родительские, дочерние и соседние элементы. CSS: дочерние селекторы Добавление и удаление дочерних элементов


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

Давайте рассмотрим пример простого html-кода:

Дочерние элементы.

Абзац и в нём жирный элемент, и вот наклонный элемент.

Тут жирный и подчёркнутый и наклонный элементы.

В этом коде два абзаца. Внутри абзацев расположены строчные элементы , и . Во втором абзаце тег вложен в тег .

Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.

Синтаксис дочерних селекторов:

Селектор 1 > Селектор 2 { Свойство: значение; }

Вот обновлённый код:

Дочерние элементы.

Абзац и в нём жирный элемент, и вот наклонный элемент.

Тут жирный и подчёркнутый и наклонный элементы.

Итак, вспомним: дочерний элемент - это элемент вложенный непосредственно в родительский. То есть, дочерний элемент - это потомок первого уровня. Давайте обратим внимание на тег , в первом абзаце он вложен в тег

А во втором он вложен в тег , хотя также является потомком тега

Поэтому во втором абзаце CSS правило для дочернего селектора p>i { color : blue ; } не сработает - наклонный текст второго абзаца не будет отображён синим цветом.

Рисунок 1. Работа примера №1.

Добраться к html-элементу второго абзаца можно используя CSS-правило: p>u>i { color : blue ; }.

Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.

Дочерние элементы.

Абзац и в нём жирный элемент, и вот наклонный элемент.

Тут жирный и подчёркнутый и наклонный элементы.

Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.

Рисунок 2. Работа примера №2.

Более сложный пример

У нас есть html-код:

Дочерние элементы.

  • Правка
    • Отменить
    • Вырезать
    • Копировать
    • Вставить
  • Начертание
    • Жирное
    • Курсивное
    • Подчеркнутое
  • Размер
    • Маленький
    • Нормальный
    • Средний
    • Большой

По умолчанию он интерпритируется так:

Задача: при помощи CSS превратить этот список в горизонтальное меню.


Рисунок 3. Цель преобразований.

Вот решение этой задачи с использованием дочерних селекторов:

Дочерние элементы.

  • Правка
    • Отменить
    • Вырезать
    • Копировать
    • Вставить
  • Начертание
    • Жирное
    • Курсивное
    • Подчеркнутое
  • Размер
    • Маленький
    • Нормальный
    • Средний
    • Большой

Для лучшего понимания этого примера читайте.

  • Выполняемая задача — выбор дочерних элементов.
  • Обозначение — цепочка: простой селектор родителя, комбинатор «>», простой селектор дочернего элемента.
  • Пример использования:

Зададим отступ слева для списка, непосредственно вложенного в элемент с классом content (на списки второго уровня вложенности эти правила не подействуют):

Content > ul { margin-left: 20px; }

Подробнее про селектор дочернего элемента

Основное отличие селектора дочернего элемента от рассмотренного ранее — тот факт, что если селектор потомка выбирает все потомки, независимо от уровня вложенности, то селектор дочернего элемента выбирает потомков только первого уровня — то есть непосредственно вложенные элементы. Например, напишем такой :

Div > span { color: #555; /* серый цвет */ }

…и такой код:

Этот текст будет черного цвета. А этот серого, ведь этот span — дочерний элемент для div.

Тут опять черный текст. И этот текст тоже черный, так как этот span не дочерний для div. Его непосредственный родитель — тег p.

Здравствуйте, уважаемые читатели! Продолжая тему CSS селекторов хочу предложить вашему вниманию описание дочерних и контекстных селекторов , а также их сравнительный анализ, поскольку по логике применения они очень похожи, хотя обладают некоторым отличием.

В своих публикациях я довольно подробно останавливался на различных видах CSS селекторов: ; а также . Кстати, в последней статье, где разбирались разные виды селектора атрибута, я довольно подробно описал, как мои теоретические выкладки можно тут же проверить, внося изменения в HTML и CSS код онлайн с помощью встроенного инструмента Google Chrome (). Такие средства редактирования имеют новейшие модификации всех популярных браузеров, включая плагин Firebug для Firefox ().

Теоретический материал этого поста вы можете также изучать, делая редактирование любой страницы любого сайта! Для этого просто нажмите F12, если пользуетесь Google Chrome или Mozilla Firefox (). А теперь представлю содержание тега p, на примере которого будем изучать дочерние и контекстные CSS селекторы :

Этот абзац включает теги форматирования em и strong, которые выделяют текст жирным и курсивом.

Пользуясь вышеописанным инструментом для редактирования я вставил данный абзац прямо в настоящую статью, вписав соответствующий текст в левой части окна для редактирования, в результате чего текст этого параграфа появился в самом верху страницы:


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

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

Такая конструкция еще называется деревом элементов. На этом рисунке наглядно представлена вложенность контейнеров, что и предполагает иерархические отношения между тегами. Тег абзаца p является дочерним элементом по отношению . В то же время тег strong не является дочерним для div, так как раcполагается в контейнере p.

Дочерний CSS селектор

Дочерний селектор в дереве элементов находится всегда непосредственно внутри родительского элемента, в этом случае синтаксис написания CSS селектора будет следующим:

Стиль будет применен к Селектору 2, но только в том случае, если он является дочерним для Селектора 1. Разберем более подробно, используя приведенный выше скриншот с деревом элементов. Например, следуя синтаксису, можно установить такое правило:

P> em {color: green;}

Это правило будет влиять на последнее слово абзаца “курсивом”, поскольку именно оно заключено между открывающим и закрывающим тегами em. Тег em является дочерним для p, потому что размещается непосредственно внутри него, следовательно текст содержания, а именно слово “курсивом” будет окрашено в зеленый цвет.


Однако другое тег em не служит прямым потомком тега p, так как входит в состав тега strong, вследствии чего часть абзаца “теги форматирования em и strong” не будет окрашена.

Контекстный CSS селектор

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

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

Как видим, контекстный селектор состоит из простых селекторов, разделенных пробелом. Для контекстных селекторов допускается применять два и более вложенных друг в друга тега. Составим теперь CSS правило для испытуемого параграфа, который я приводил выше:

P em {color: green;}


Как видите, зеленым окрашен не только текст части содержания абзаца, который непосредственно заключен в тег форматирования em, то есть слово “курсивом”, но и участок текста другого тега em, который входит еще и в состав тега strong. Это случилось потому, что действует правило с контекстным селектором, для которого не важен уровень вложенности в отличие от дочернего селектора. В этом и есть принципиальная разница дочернего и контекстного селектора.

Рассмотрим еще один пример взаимодействия контекстных и дочерних селекторов с нашим абзацем. Пропишем cледующие CSS правила для дочернего и контекстного селектора:

Div em {color: red;} p> em {color: green;}

После этого наш абзац приобретает такое оформление:


Как видите, кусок текста, заключенный в теги em и strong, выкрашен в красный цвет, потому что для него справедливо правило контекстного селектора, то есть тег em заключен в контейнеры strong и div, а уровень вложенности, как уже было отмечено, не имеет значения.

Возникает вопрос: почему же слово “курсивом”, тоже являющееся содержанием em, окрашено в зеленый цвет? Ведь и для него правило контекстного селектора является актуальным. Но для этого участка текста абзаца справедливо и правило дочернего селектора, потому что оно не противоречит тому условию, что для дочернего селектора элемент должен непосредственно входить в состав тега p.

Дело в том, в CSS действует закон приоритета для CSS свойств, находящихся ниже. То есть в данном случае правило дочернего селектора находится в документе ниже, чем CSS стили, прописанные для контекстного селектора контейнера div. Поэтому слово “курсивом” стало зеленым. Если поменять их местами, то правило «p> em {color: green;}» перестает действовать и участок текста “курсивом” будет красным.

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

Дочерние селекторы CSS

В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.

Представьте, что вам нужно присвоить стиль только тем тегам

Которые являются дочерними по отношению к , не затрагивая остальные

(например,

Дочерние по отношению к

).
Как это сделать? Очень просто: создадим дочерний селектор:

Body > p { color: #333; }

Обратите внимание на символ > после body . С помощью него вы указываете, что стиль применяется исключительно для дочерних тегов

Родителя . Если символ убрать, то стиль применится абсолютно ко всем тегам

Которые находятся внутри тега , хотя они могут и не являться для него дочерними.

Дополнительные псевдоклассы

В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».

  • :first-child – с помощью этого псевдокласса можно применить стиль к указанному элементу веб-страницы, при условии, что он является первым
  • :last-child – стиль применяется к указанному элементу веб-страницы при условии, что он является последним дочерним элементом своего родителя;
  • :nth-child – позволяет выбрать четные (even) и нечетные (odd) дочерние элементы; также с помощью данного псевдокласса можно стилизовать чередующиеся дочерние элементы, используя выражения вида an+b и числа;
  • :only-child – применяется к дочернему элементу при условии, что тот является единственным ребенком у родителя;
  • :first-of-type – стиль применяется к первому элементу указанного типа (даже если этот элемент не является первым дочерним для своего родителя и над ним находятся другие дочерние элементы других типов);
  • :last-of-type – работает точно так же, как и предыдущий псевдокласс, с той лишь разницей, что стиль применяется к последнему элементу указанного типа ;
  • :nth-of-type – по принципу работы похож на:nth-child , но ориентируется на тип элемента;
  • :only-of-type – применяется к дочернему элементу указанного типа при условии, что тот является у родителя единственным ребенком своего типа .

Пример использования:first-child, :last-child и:nth-child

Первый ребенок

Второй ребенок

Третий ребенок

Нечетный номер
Четный номер
Нечетный номер
Четный номер

Последний ребенок

/* CSS */ p:first-child { font-weight: bold; text-transform: uppercase; } p:last-child { font-style: italic; font-size: 0.8em; } p:nth-child(3) { color: red; } tr:nth-child(odd) { background-color: #A2DED0; } tr:nth-child(even) { background-color: #C8F7C5; } Скриншот: применение:first-child, :last-child и:nth-child

Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег

является родителем для тегов

,

. Разберем CSS по порядку.

Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя , то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега

добавить еще какой-нибудь тег (к примеру,

), то стиль p:first-child уже не будет отображаться, поскольку

Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h2 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

Лишь тогда, когда он будет являться последним дочерним элементом своего родителя . Добавьте после

Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега

(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type

Первый ребенок

Второй ребенок

Третий ребенок

Четвертый ребенок

Пятый ребенок

Последний ребенок

/* CSS */ p:first-of-type { color: violet; text-transform: uppercase; } p:last-of-type { font-style: italic; font-size: 0.8em; } p:nth-of-type(3) { color: red; } p:nth-of-type(odd) { background-color: #A2DED0; } p:nth-of-type(even) { background-color: #C8F7C5; } h3:only-of-type { text-decoration: underline; }
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

Есть еще и тег

, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

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

Который по факту является пятым ребенком тега

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

С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h3:only-of-type – применяется к содержимому тега

, делая текст подчеркнутым. Данный стиль работает лишь потому, что тег

является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

, стиль не будет применён.

Выводы

Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

С помощью дополнительных псевдоклассов:first-child, :last-child, :nth-child, :only-child можно стилизовать дочерние элементы HTML-документа, ориентируясь на их местоположение, нумерацию в дереве элементов.

Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

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

Element > ul { padding- top: 20px; }

Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности.

Подробный анализ работы селектора дочернего элемента

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

Более наглядно оценить работу оператора дочернего селектора поможет следующий пример:

Div > р { color: #ff0000; /* красный */ }

< div> Данная строка будет иметь по умолчанию черный текст. < span> Эта строка перекраситься в красный в следствие того, что р является дочерним тегом для дива. < p> Опять видим черные буквы. < span> Здесь мы видим тоже черные символы, так как для этого спана родителем является тег р.

Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности.

Ограничение для применения оператора дочернего селектора

Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье.

Зачем применяется

Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек.

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

Main > header { /* оформление относится только к главному хедеру */ }

Данный пример справедлив в тех случаях, когда тег header используют для выделения заголовков статей. В нашем случае мы задаем оформление только основному хедеру, и не задеваем второстепенные. Этот прием также позволяет избегать применения лишнего раза идентификаторов, что в свою очередь облегчает вес CSS-файла и делает его более читабельным.

Подводя итоги

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