Что такое родственные отношения html
Часть 4. Соседние и родственные селекторы
В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.
Соседние селекторы
С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу.
Пример: допустим, вам необходимо, чтобы каждый абзац
, который идет первым после заголовка
, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:
Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN <> (стиль применяется к selectorN ).
Родственные селекторы
Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда
Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев
, которые идут после заголовка
. Код CSS будет выглядеть так:
…и немного HTML для примера:
Взгляните на HTML-код: стиль применится ко всем тегам
, которые следуют после тега
и находятся до закрывающего тега родителя
, к которым применится стиль. Обратите внимание, что тег
этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу
, который находится над
, а также к тегу
, имеющему другого родителя
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.
Соседние, родственные и дочерние селекторы в CSS.
Соседние селекторы
Соседними называются элементы web-страницы, когда они следуют непосредственно друг за другом в коде документа. Синтаксис:
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами P и H. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу H, но только в том случае, если он является соседним для элемента P и следует сразу после него. Рассмотрим пример:
Родственные селекторы
Родственные селекторы (сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне).
Данные селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда
В данном примере стиль применится ко всем тегам
, которые следуют после тега
и находятся до закрывающего тега родителя
Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Синтаксис:
Стиль применяется к элементу H, только когда он является дочерним для элемента P. Рассмотрим пример:
В данном примере тег , в первом абзаце вложен в тег
, а во втором он вложен в тег , хотя также является потомком тега
. Поэтому во втором абзаце CSS правило для дочернего селектора p>i < color: blue; >не сработает – наклонный текст второго абзаца не будет отображён синим цветом.
Селектор обобщенных родственных элементов
) и область его возможного применения.
На написание данной статьи меня натолкнула малая распространённость информации о нём.
Что это такое?
В результате в красный цвет окрасятся заголовки h2, т.к. у них общий родительский элемент с заголовком h1, и в коде они стоят после него.
Если же элемент будет стоять выше исходного, то он не будет выбран.
Следует запомнить, что выбираются только элементы, которые имеют общего родителя с исходным, а не те, которые всего-лишь имеют общего предка. Это хорошо иллюстрирует второй пример.
В результате ничего не выделится красным, т.к. родитель элемента span — p, а элемента h1 — article.
Для того чтобы span стал красным, необходимо либо вынести его из абзаца на один уровень с h1, либо сделать так:
Использование вместе с :hover
B” проявляет в связке с событиями элементов, такими как :hover, :focus и др.
Если раньше можно было менять стиль элемента только при наведении указателя мыши на него самого, то использование селектора обобщенных родственных элементов позволяет поменять стиль элемента, отличного от того, на котором произошло событие.
Символически (в случае с :hover) это выглядит так:
A:hover
В результате, блоки станут зелёного цвета, при наведении на надпись.
Теперь пойдём дальше и присвоим элементам разные классы.
Пример
Можно применять вот так:
HTML:
Анимируем
Очень интересного эффекта можно достичь в совокупности с новыми возможностями CSS3. Например, в примере ниже используется свойство transition.
Как видите, у селектора обобщенных родственных элементов есть достаточное количество интересных способов применения. В последнее время CSS продвинулся далеко и позволяет реализовать то, что раньше возможно было только с использованием JavaScript.
Но всё-таки, на мой взгляд, если провести аналогии, CSS — это механическая составляющая (если угодно — “железо”) которая не предназначена для построения логики. JavaScript, например, может выступать в роли “программного обеспечения”.
Итак, в этой статье я попытался раскрыть тему селектора обобщенных родственных элементов. Получилось или нет, судить вам.
Что такое родственные отношения html
CSS: родственные селекторы (
Давайте на простом примере разберём работу этого селектора:
В этом примере родственный селектор h1
p сработал на все теги
, следующие за тегом
Теперь другой пример использования родственных селекторов:
Тут видно, что стиль сработает только для тегов
, которые являются потомками тега
То есть родственные элементы должны иметь общего родителя и находиться на одном уровне.
Родственные селекторы похожи на соседние селекторы, но отличаются тем, что стиль применяется ко всем выбраным элементам, а не только к первому из них.
Pодственный селектор и псевдокласс :hover
Результат будет таким:
Рисунок 1. Родственные селекторы и :hover.
Более реальный и сложный пример
Сейчас мы рассмотрим немного сложный пример, если вы только начали изучение CSS, то вам может он показаться непонятным. Для понимания его работы нужно знать некоторые данные из CSS, которых вы, возможно, ешё не знаете. В таком случае пока просто пропустите его, вернётесь к нему позже.
Давайте рассмотрим код формы, в которой при активации поля формы появляется подсказка. Вот так она выглядит:
Рисунок 2. Поле формы с подсказкой.
Если поместить курсор в поле «Имя пользователя», то появится одна подсказка, если в поле «Пароль», то другая.
Для определения стиля появляющегося блока тут использован селектор input:focus
Сама подсказка состоит из трёх блоков div :
Родственные селекторы
p стиль будет применяться ко всем элементам
, располагающихся после заголовка
. При этом
должны иметь общего родителя, так что если
Здесь красный цвет текста будет установлен для всех абзацев.
Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку
не имеют общего родителя.
Синтаксис
Для управления стилем родственных элементов используется символ тильды (
), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.
HTML5 CSS3 IE Cr Op Sa Fx
В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.
Часть 4. Соседние и родственные селекторы
В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.
Соседние селекторы
С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу.
Пример: допустим, вам необходимо, чтобы каждый абзац
, который идет первым после заголовка
, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:
Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN <> (стиль применяется к selectorN ).
Родственные селекторы
Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда
Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев
, которые идут после заголовка
. Код CSS будет выглядеть так:
…и немного HTML для примера:
Взгляните на HTML-код: стиль применится ко всем тегам
, которые следуют после тега
и находятся до закрывающего тега родителя
, к которым применится стиль. Обратите внимание, что тег
этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу
, который находится над
, а также к тегу
, имеющему другого родителя
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Родственные отношения (нейтральные)
Родственные отношения – это нейтральные отношения между людьми, которые одновременно и очень похожи друг на друга, и совершенно разные. Взаимопонимание в таких отношениях высоко, но при этом часто бывает и непонимание в бытовых вопросах.
«Родственники» способны осознать жизненные ценности и желания друг друга, поэтому их дискуссии носят практический склад и партнеры с радостью обмениваются опытом и мнениями. Но при этом, зона уверенности одного из партнеров попадает на самую слабую зону второго, из-за чего неосознанно можно нанести друг другу обиду.
В целом, отношения напоминают беседы дальних родственников, которые могут формально общаться, при этом быть вежливыми и учтивыми, но не особо интересоваться друг другом. Зоны интереса в общении у «родственников» одинаковые, поэтому партнер не может удовлетворить ваши вопросы своим экспертным знанием, как и вы его.
Родственные отношения достаточно однообразны, и расцветают лишь тогда, когда в компании появляются новые люди. Вдвоем «родственники» скучают, обменявшись мнениями и поняв друг друга, им, в целом, не о чем больше говорить. Если запереть двух «родственников» в одной комнате, то велика вероятность грандиозного конфликта, когда как в большой семье такое общение может быть весьма благоприятным.
Родственные отношения учат нас иначе воспринимать нашу болевую функцию, в таких отношениях можно получить по ней полезный опыт, который в дальнейшем поможет легче преодолевать трудности. «Родственник» помогает нам преодолеть режим страха перед проблемой в режим конструктивного её преодоления.
Посмотрим, как проходят родственные отношения в разных парах:
Дон Кихот учит Гексли решать проблемы по мере поступления, не откладывая на потом. Гексли учит Дон Кихота развивать отношения с людьми, не боясь этого.
Дюма учит Габена быть социальным, а не замыкаться на своем комфорте. Габен учит Дюму решать технологические вопросы без эмоций.
Гюго учит Гамлета заботиться о родных сразу, без дополнительных намеков с их стороны. Гамлет показывает Гюго, как прогнозировать будущее отношений и не навязываться людям.
Робеспьер учит Максима не волноваться при ситуациях неопределенности, а извлекать из них опыт, а Максим учит Робеспьера занимать оборонительную позицию и пресекать грубости.
Жуков учит Наполеона наводить порядок в жизни, в Наполеон позволяет Жукову перестать боятся человеческих отношений.
Есенин дарит Бальзаку энтузиазм при начале новых дел, а Бальзак координирует Есенина так, чтобы его существование приносило эффективные результаты.
Джек Лондон учит Штирлица воспринимать новые идеи и не зацикливаться на старых, а Штирлиц показывает Джеку, что стоит не только зацикливаться на работе, но и уметь отдыхать в комфорте.
Драйзер учит Достоевского направлять эмоции близких и отвечать за их состояние, а Достоевский показывает Драйзеру, как ненавязчиво влиять на взаимодействие между людьми.