что значит дочерний элемент

Рисунок 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. Для какого тега элемент выступает родителем?

Источник

Не могу понять, где в HTML дочерние, родительские элементы?

Добрый вечер, вечно вижу в статьях такие термины, как «дочерние» элементы, «родительские» и т.д. Гуглил, гуглил не понимаю все равно. Можете мне пожалуйста разъяснить на основе нижеприведенного HTML кода, заранее благодарю.

Простой 9 комментариев

span дочерний по отношению к div и родительский по отношению к h1

П.С. Вкладывать h1 в span нельзя

Это как обнимашки.
Мама и папа (а иногда дядя Рустем на остановке) обнимают своих детей (как правило). Родители.

div обнимает span. Значит div — родитель span‘у. А span — дочь его, потомок.

span родила внебрачную дочь и назвала её h1, в честь мужа. Брезгливо обнимает.

Для h1, span — родитель. Объятия через страдания.

Источник

CSS уроки, 2 часть: CSS родительские элементы, дочерние, псевдоклассы

Родительские и дочерние элементы, псевдоклассы

В предыдущем уроке мы рассмотрели, как с помощью классов (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 позволяет вам применять стиль к вводу с клавиатуры. Стиль становится активным, когда элемент находится в фокусе. Один общий пример — установить цвет фона (например, розовый) или рамку для поля ввода:

Источник

Комплексные селекторы

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

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

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

Типовые селекторы

Перед глубоким погружением в некоторые более сложные селекторы и те, которые предлагаются в CSS3, давайте взглянем на некоторые наиболее типовые селекторы на сегодня. Эти селекторы включают в себя селекторы типа, классы и идентификаторы.

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

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

Селектор потомка

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

Селектор article h2 является селектором потомка и выбирает только элементы

за пределами элемента не будет выбран.

Ниже приведены заголовки, из которых выбраны строки 3 и 5.

Прямой дочерний селектор

Порой селекторы потомка заходят слишком далеко, выбирая больше, чем хотелось бы. Иногда должны быть выбраны только прямые дети родительского элемента, а не каждый экземпляр элемента вложенный глубоко внутри предка. В этом случае может быть использован прямой дочерний селектор путём размещения знака больше (>) между родительским и дочерним элементом в селекторе.

Например, article > p является прямым дочерним селектором только когда элементы

Родственные селекторы

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

Общий родственный селектор

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

) между двумя элементами внутри селектора. Первый элемент определяет, что второй элемент должен быть родственным с ним, и у обоих должен быть один и тот же родитель.

p — это общий родственный селектор, он ищет элементы

, которые следуют после любых элементов

в том же родителе. Чтобы элемент

был выбран, он должен идти после любого элемента

Абзацы в строках 5 и 9 выбраны, поскольку они идут после заголовка в дереве документа и у них тот же родитель, что и у родственного заголовка.

Соседние селекторы

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

идущие непосредственно после элементов

. У обоих также должен быть один и тот же родительский элемент.

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

Пример соседних селекторов

pОбщий родственный селекторВыбирает элемент, который следует в любом месте после предыдущего элемента, и оба элемента имеют одного общего предка.h2 + pСоседний селекторВыбирает элемент, который следует непосредственно после предыдущего элемента, и оба элемента имеют одного общего предка.

Селекторы атрибутов

Селектор наличия атрибута

Первый селектор атрибута определяет элемент на основе того, включен ли этот атрибут или нет, независимо от его фактического значения. Чтобы выбрать элемент основываясь на том, присутствует атрибут или нет, просто включите имя атрибута в квадратных скобках ([]) в селекторе. Квадратные скобки могут идти после любого селектора типа или класса, в зависимости от желаемого уровня специфичности.

Селектор атрибута =

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

Селектор атрибута *=

Когда мы пытаемся найти элемент на основе части значения атрибута, но не точного совпадения, может быть использован символ звёздочки (*) в квадратных скобках селектора. Звёздочка должна идти сразу после имени атрибута, непосредственно перед знаком равенства. Это означает, что следующее за ним значение только должно появиться или содержаться в значении атрибута.

Селектор атрибута ^=

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

Противоположностью предыдущего селектора является селектор атрибутов, где значение оканчивается определённым текстом. Вместо использования символа ^ применяется знак доллара ($) в квадратных скобках селектора между именем атрибута и знаком равенства. Использование знака доллара означает, что значение атрибута должно заканчиваться указанным текстом.

Селектор атрибута

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

) в квадратных скобках селектора между именем атрибута и знаком равенства означает значение атрибута разделённое пробелами, из которых одно слово точно соответствует указанному значению.

Селектор атрибута |=

Когда значение атрибута разделено дефисом, а не пробелами, может быть использован символ вертикальной линии (|) в квадратных скобках селектора между именем атрибута и знаком равенства. Вертикальная линия означает, что значение атрибута может быть разделено дефисом, однако слова должны начинаться с указанного значения.

Пример селекторов атрибутов

=»tag»]Селектор атрибута

=Выбирает элемент, если значение данного атрибута разделено пробелами и точно совпадает с одним указанным словом.a[lang|=»en»]Селектор атрибута |=Выбирает элемент, если значение данного атрибута разделено дефисом и начинается с указанного слова.

Псевдоклассы

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

Псевдоклассы ссылок

Псевдоклассы действия пользователя

Псевдоклассы состояния интерфейса

Последние два элемента состояния интерфейса, псевдоклассы :checked и :indeterminate вращаются вокруг флажков и переключателей. Псевдокласс :checked выбирает флажки или переключатели, которые, как вы можете ожидать, помечены. Когда ни один флажок или переключатель не помечен и не выбран, то он живёт в неопределённом состоянии, для которого может быть использован псевдокласс :indeterminate для нацеливания на подобные элементы.

Псевдоклассы структуры и положения

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

:first-child, :last-child и :only-child

Здесь селектор li:first-child определяет первый пункт списка, в то время как li:last-child определяет последний пункт списка, таким образом, выбираются строки 2 и 10. Селектор div:only-child ищет

:first-of-type, :last-of-type и :only-of-type

Псевдокласс :first-of-type выберет первый элемент своего типа внутри родителя, в то время как псевдокласс :last-of-type выберет последний элемент этого типа внутри родителя. Псевдокласс :only-of-type выберет элемент, если он является единственным такого типа в родителе.

В приведённом ниже примере псевдоклассы p:first-of-type и p:last-of-type выберут, соответственно, первый и последний абзацы в статье, независимо от того, являются ли они на самом деле первыми или последними детьми в статье. Строки 3 и 6 выбраны этими селекторами. Селектор img:only-of-type определяет изображение в строке 5, как единственное изображение появляющееся в статье.

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

Использование чисел и выражений в псевдоклассах

Как уже упоминалось, использование конкретного числа в псевдоклассе вычисляет с начала или с конца дерева документа и выбирает один соответствующий элемент. Например, селектор li:nth-child(4) выберет четвёртый пункт в списке. Подсчёт начинается с первого пункта списка и увеличивается на единицу для каждого пункта списка, пока, наконец, не обнаружит четвёртый пункт и выберет его. При указании конкретного числа оно должно быть положительным.

Например, селектор li:nth-child(3n) будет определять каждый третий элемент пункта списка. Использование этого выражения соответствует 3×0, 3×1, 3×2 и так далее. Как вы можете видеть, результаты этого выражения выбирают третий, шестой и каждый элемент кратный трём.

Селектор li:nth-child(4n+7) определит каждый четвёртый пункт списка, начиная с седьмого пункта. Опять же, использование этого выражения эквивалентно (4×0)+7, (4×1)+7, (4×2)+7 и так далее. Результаты этого выражения приведут к выбору седьмого, одиннадцатого, пятнадцатого и каждого четвёртого элемента.

При использовании аргумента n без числа впереди, переменная a расценивается как равная 1. Селектор li:nth-child(n+5) выберет каждый пункт списка, начиная с пятого, оставив первые четыре пункта списка не выбранными. В выражении это разбирается как (1×0)+5, (1×1)+5, (1×2)+5 и так далее.

:nth-child(n) и :nth-last-child(n)

Очередное изменение выражения, на этот раз с отрицательным значением, даст новый выбор. Здесь селектор li:nth-child(-n+4) определяет четыре верхних пункта списка, оставляя остальные пункты не выделенными, таким образом будут выбраны строки со 1 по 4.

Добавление отрицательного числа перед аргументом n снова изменяет выбор. Здесь селектор li:nth-child(-2n+5) определяет каждый второй пункт списка из первых пяти пунктов, таким образом, будут выбраны пункты в строках 2, 4 и 6.

:nth-of-type(n) и :nth-last-of-type(n)

Используя псевдокласс :nth-of-type(n) в селекторе p:nth-of-type(3n) мы можем определить каждый третий абзац в родителе, независимо от других родственных элементов внутри родителя. Здесь выбираются абзацы в строках 5 и 9.

Псевдокласс :target

Псевдокласс :empty

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

Использование псевдокласса div:empty определит

Псевдокласс :not

Пример с псевдоклассами

Псевдоэлементы

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

Текстовые псевдоэлементы

Демонстрация текстовых псевдоэлементов

Псевдоэлементы, генерируемые содержимое

Псевдоэлемент :before создаёт псевдоэлемент до или впереди выбранного элемента, в то время как :after создаёт псевдоэлемент после или позади выбранного элемента. Эти псевдоэлементы выводятся вложенными внутри выбранного элемента, а не за его пределами. Ниже псевдоэлемент :after используется для отображения значения атрибута href у ссылок в круглых скобках после самой ссылки. Такая информация полезна, но, в конечном итоге, не всякий браузер поддерживает эти псевдоэлементы.

Демонстрация псевдоэлементов, генерируемых содержимое

Псевдоэлемент ::selection

Двоеточие (:) и двойное двоеточие (::)

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

Демонстрация псевдоэлементов

Поддержка селекторов в браузерах

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

CSS3.info предлагает инструмент CSS3 Selectors Test, который будет информировать вас о том, какие селекторы поддерживаются браузером. Также неплохой идеей будет проверить поддержку браузера непосредственно в нём.

Кроме того, Selectivizr, утилита JavaScript, обеспечивает великолепную поддержку этих селекторов в Internet Explorer 6-8. Больше поддержки при необходимости может также предложить jQuery selectors.

Скорость и производительность селекторов

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

Источник