Дочерние элементы – это элементы, которые располагаются непосредственно внутри родительского элемента. Обратите внимание на слова: непосредственно внутри.
Давайте рассмотрим пример простого html-кода:
В этом коде два абзаца. Внутри абзацев расположены строчные элементы , и . Во втором абзаце тег вложен в тег .
Теперь давайте к этому html-коду добавим CSS-стили с использованием дочерних селекторов.
Синтаксис дочерних селекторов:
Вот обновлённый код:
Итак, вспомним: дочерний элемент – это элемент вложенный непосредственно в родительский. То есть, дочерний элемент – это потомок первого уровня. Давайте обратим внимание на тег , в первом абзаце он вложен в тег
, а во втором он вложен в тег , хотя также является потомком тега
. Поэтому во втором абзаце CSS правило для дочернего селектора p>i < color : blue ; >не сработает – наклонный текст второго абзаца не будет отображён синим цветом.
Рисунок 1. Работа примера №1.
Добраться к html-элементу второго абзаца можно используя CSS-правило: p>u>i < color : blue ; >.
Давайте при помощи такого правила зададим наклонному тексту второго абзаца жёлтый цвет.
Этот стиль сработает и наклонный текст во втором абзаце будет отображён жёлтым цветом.
Рисунок 2. Работа примера №2.
Более сложный пример
У нас есть html-код:
По умолчанию он интерпритируется так:
Задача: при помощи CSS превратить этот список в горизонтальное меню.
Рисунок 3. Цель преобразований.
Вот решение этой задачи с использованием дочерних селекторов:
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберём небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере применяется несколько контейнеров, которые в коде располагаются один в другом. Нагляднее это видно на дереве элементов, так называется структура отношений тегов документа между собой (рис. 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
Результат данного примера показан на рис. 12.2.
Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора
На тег в примере действуют одновременно два правила: контекстный селектор (тег расположен внутри
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно отказаться, заменив их контекстными селекторами. Однако использование дочерних селекторов расширяет возможности по управлению стилями элементов, что в итоге позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают иерархической структурой — сюда относятся, например, таблицы и разные списки. В примере 12.3 показано изменение вида списка с помощью стилей. За счёт вложения одного списка в другой получаем разновидность меню. Заголовки при этом располагаются горизонтально, а набор ссылок — вертикально под заголовками (рис. 12.3).
Рис. 12.3. Список в виде меню
Пример 12.3. Использование дочерних селекторов
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.
Часть 3. Дочерние селекторы CSS. Дополнительные псевдоклассы
Вы дошли до третьей части этой главы. Здесь вы узнаете, как использовать селекторы дочерних элементов в CSS, а также познакомитесь с некоторыми дополнительными псевдоклассами для более точной выборки.
Дочерние селекторы CSS
В предыдущей статье мы рассказывали о родственных связях между элементами HTML-документа, в том числе и о дочерних элементах. Давайте посмотрим на примере, как эти связи можно использовать в CSS.
Представьте, что вам нужно присвоить стиль только тем тегам
, дочерние по отношению к
Дополнительные псевдоклассы
В CSS3 существует ряд псевдоклассов для работы с дочерними элементами. Ниже приведено описание каждого из них, примеры использования, а также отличия между псевдоклассами вида «child» и «of-type».
Пример использования :first-child, :last-child и :nth-child
Скриншот: применение :first-child, :last-child и :nth-child
Мы написали CSS стиль для дочерних элементов простого HTML-документа, где тег
,
. Разберем CSS по порядку.
Первое правило – p:first-child – касается элемента p : если он является первым дочерним элементом своего родителя, то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега
), то стиль p:first-child уже не будет отображаться, поскольку
Всё то же самое происходит и с правилом 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
Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type
, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с :last-of-child ).
Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу
, который является третьим по счету элементом своего типа у родителя. На скриншоте вы видите, что красный цвет применяется к тегу
, который по факту является пятым ребенком тега
с красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.
Последнее правило – 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-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.
В этой статье мы с Вами углубим знания о селекторах CSS, особое внимание мы уделим селекторам потомков, ведь понимание как работают эти селекторы является очень важной темой, требующей обязательного изучения. Кроме того, мы с Вами разберемся в родственных связях HTML элементов, узнаем какие элементы являются родительскими, дочерними и даже сестринскими.
Многие термины, которые вы прочитаете в этой статье, будут использоваться в дальнейших статьях этого учебника, прошу Вас внимательно их изучить и понять. Понимание древовидной структуры документа Вам понадобится не только при изучении CSS, но и при изучении, например, клиентского JavaScript.
Древовидная структура HTML документа
Рассмотрим следующее изображение:
Рис. 8 Пример древовидной структуры HTML.
Рис. 8а Предок в HTML документе.
Рис. 8б Потомки в HTML документе.
Обратите внимание на важный момент, что элемент является потомком одновременно для элемента
Рис. 8в Потомок для нескольких элементов.
Рис. 8г Родительские элементы в HTML документе.
Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента
, и является дочерним именно для него.
Рис. 8д Дочерние элементы в HTML документе.
Еще раз акцентирую ваше внимание на том, что сестринские элементы расположены на одном уровне в пределах одного родителя. К примеру, элементы
Рис. 8е Сестринские элементы в HTML документе.
Селекторы потомков
В конце предыдущей статьи, мы с Вами уже рассматривали примеры с селекторами потомков, их основное назначение заключается в том, чтобы единообразно отформатировать элементы, которые расположены внутри других элементов (содержатся внутри других элементов).
Например, во всех заголовках
Вместо h2 i в нашем случае можно воспользоваться и универсальным селектором h2 *, так как внутри элемента
У Вас может возникнуть вопрос: почему мы просто не создали селектор класса для i? Благодаря селектору потомка у нас отсутствует необходимость с использованием глобального атрибута class назначать каждому элементу свой класс, что может значительно сэкономить наше время.
Рассмотрим этот пример:
Результат нашего примера:
Рис. 9 Пример использования селектора потомков.
Думаю, Вы уже начали осознавать какие возможности даёт CSS в оформлении веб страниц, но это только начало нашего пути в изучении, давайте рассмотрим другие примеры, постепенно все более углубляясь в тонкости использования таблиц стилей на ваших страницах.
Рис. 10 Древовидная структура страницы.
При создании селектора потомков вы объединяете селекторы вместе согласно «ветви дерева» документа, помещая самого старшего родителя слева, а форматируемый элемент располагаете справа.
Селекторы, которые будут работать аналогично и выбирать элементы внутри элементов :
Обратите внимание, что селекторы потомков могут включать более двух элементов, то есть содержать весь путь по дереву страницы, или наоборот могут не включать какие-то элементы, которые вложены по пути к форматируемому элементу и это тоже будет работать. Старайтесь без необходимости не включать «лишние» селекторы по пути к форматируемому элементу и использовать короткие селекторы.
Используя селектор потомков, давайте отформатируем ссылки, которые находятся только внутри элементов маркированного списка:
Как вы понимаете, ссылка, помещённая внутри элемента
не будет отформатирована, для неё мы создадим свой стиль:
Теперь соберем это в одном примере и посмотрим результат:
Результат нашего примера:
Рис. 11 Пример декорирования ссылок с использованием селекторов потомков.
Продвинутое использование селекторов потомка
Рассмотрим пример, который более приближен к текущим реалиям, а именно комбинирование селекторов класса, а не селекторов типа, как мы рассматривали в примерах выше.
Предположим, что вы создаете страницу о сотрудниках Вашей организации. Вам необходимо разместить следующую информацию о каждом сотруднике: его фото, фамилия и имя, телефон и адрес электронной почты.
Предлагаю каждого сотрудника поместить в отдельный контейнер (элемент
Затем мы создаем стили для контейнера и селекторов потомков:
Теперь соберем это в одном примере и посмотрим результат:
Результат нашего примера:
Рис. 12 Пример стилизации карточки сотрудников с использованием селекторов потомков.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Практическое задание № 3.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
В предыдущем уроке мы рассмотрели, как с помощью классов (class) и идентификаторов (id) можно ограничивать область действия команды стиля. Теперь посмотрим, какие существуют другие методы для точного управления командами стиля.
Родительские и дочерние элементы
Часто, элементы одной HTML-страницы могут быть включены в другие элементы. Например, в следующем абзаце гиперссылка включена в элемент и в абзац
Посетите следующую интересную страницу!
Внутренний элемент называется дочерним, а внешний — родительским. В этом случае,
Отношения родительский-дочерний особенно полезны для определения области действия команд CSS. Например, с помощью следующей команды вы можете удалить гиперссылки в абзаце с классом menu (некоторые веб-дизайнеры предпочитают этот стиль главному меню):
Преимущество этого подхода заключается в том, что класс указывается только один раз — для абзаца, а не для каждой гиперссылки в отдельности.
Обратите внимание, как сначала указывается имя родительского элемента (возможно, с именем класса или идентификатора), а затем имя дочернего элемента, оставляя пробел.
CSS позволяет использовать другой тип отношения элемента: parent-child. Разница заключается в том, что дочерним элементом может быть только тот элемент, который непосредственно связан с родителем. Например:
является дочерним элементом
Стиль для детей можно указать следующим образом:
Эта команда удалит подчеркивание всех дочерних гиперссылок элемента .
Псевдоклассы
Используя так называемые псевдоклассы, вы можете создавать специальные эффекты для некоторых селекторов. Псевдоклассы обычно назначаются следующим образом:
Давайте посмотрим на некоторые конкретные примеры.
Псевдокласс link
С помощью псевдокласса link вы можете изменить стиль гиперссылок (которые обычно синего цвета и подчеркнуты):
Псевдокласс visited
Псевдокласс visited определяет стиль для уже посещенных гиперссылок:
Псевдокласс hover
Псевдокласс hover используется для указания стиля элемента, на котором расположен указатель мыши. Чаще всего они используются гиперссылками:
Эта команда CSS превратит любую гиперссылку в красную, когда на нее наведен указатель мыши.
Псевдокласс hover может использоваться и для других элементов. Например, раскрывающиеся меню и их производных. Когда указано главное меню, стиль наведения активируется, и в результате отображается подменю. Более ранние версии Internet Explorer поддерживают псевдокласс hover только для гиперссылок, но существуют способы обойти эти ограничения.
Псевдокласс active
Псевдокласс active устанавливает стиль для элементов, по которым щелкают в данный момент. Активный псевдокласс часто используется с гиперссылками:
Если вы используете комбинацию псевдоклассов гиперссылок, при их объявлении вы должны вы должны соблюдать порядок link — visited — hover — active. В противном случае, стиль не будет выполнен.
Псевдокласс first-child
Псевдокласс first-child используется для указания первого дочернего стиля элемента. Например, вы можете создать первый абзац любой страницы курсивным шрифтом, применив псевдокласс first-child к абзацам:
Вот немного более сложный пример выделения первой гиперссылки в каждом абзаце:
Псевдокласс focus
Псевдокласс focus позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример — установить цвет фона (например, розовый) или рамку для поля ввода:
Рисунок 1. Работа примера №1.
Рисунок 2. Работа примера №2.
Рисунок 3. Цель преобразований.
Скриншот: применение :first-child, :last-child и :nth-child
Скриншот: применение :first-of-type, :last-of-type, :nth-of-type и :only-of-type
Рис. 9 Пример использования селектора потомков.
Рис. 11 Пример декорирования ссылок с использованием селекторов потомков.
Рис. 12 Пример стилизации карточки сотрудников с использованием селекторов потомков.