Часть 4. Соседние и родственные селекторы
В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.
Соседние селекторы
С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу.
Пример: допустим, вам необходимо, чтобы каждый абзац
, который идет первым после заголовка , имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:
Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN <> (стиль применяется к selectorN ).
/* Отступ от абзаца до картинки 30px */ p+img < padding-top: 30px; >/* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */ h2+h3+p
Родственные селекторы
Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~ .
Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев
, которые идут после заголовка . Код CSS будет выглядеть так:
h1 ~ p
…и немного HTML для примера:
Текст
Заголовок 1
Текст
Текст
Заголовок 2
Текст
Текст
Взгляните на HTML-код: стиль применится ко всем тегам
, которые следуют после тега и находятся до закрывающего тега родителя . В нашем варианте насчитывается 3 элемента
, к которым применится стиль. Обратите внимание, что тег этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу
, который находится над , а также к тегу
, имеющему другого родителя .
Выводы
Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.
Перейдя к следующей подглаве, вы познакомитесь с селекторами атрибутов.
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
Lorem ipsum dolor sit amet.
Элемент является дочерним по отношению к
, поскольку он находится внутри этого контейнера. Соответственно
выступает в качестве родителя .
Lorem ipsum dolor sit amet.
Элементы и никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера
, не влияет на их отношение.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Соседними здесь являются элементы и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Примечание
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий ( B + /* плюс */ I ).
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Selectors Level 3 | Рекомендация |
| CSS 2.1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 7 | 8 | 12 | 1 | 3.5 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Справочник CSS
- !important
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::marker
- ::placeholder
- ::selection
- :active
- :blank
- :checked
- :default
- :dir
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-within
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @document
- @font-face
- @import
- @keyframes
- @media
- @page
- @supports
- @viewport
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- caption-side
- caret-color
- clear
- clip
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-kerning
- font-size
- font-stretch
- font-style
- font-variant
- font-weight
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-rendering
- justify-content
- left
- letter-spacing
- line-clamp
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- marks
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- perspective
- perspective-origin
- place-content
- pointer-events
- position
- quotes
- resize
- right
- scroll-behavior
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-fill-color
- text-indent
- text-orientation
- text-overflow
- text-shadow
- text-stroke
- text-stroke-color
- text-stroke-width
- text-transform
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- zoom
Обращение к родителю при hover дочернего блока
Отобрать элемент от дочернего к родителю CSS
Приветствую. Как ясно из темы у меня проблема с отбором элемента. Есть таблица в которой в.
Как можно вернуть результат вычислений из дочернего процесса родителю?
Как можно вернуть результат вычислений из дочернего процесса родителю.
Как можно вернуть результат вычислений из дочернего процесса родителю?
Как можно вернуть результат вычислений из дочернего процесса родителю.
Обращение к родителю
В общем есть такой страшный код: <a onclick="return hs.expand(this)".
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
.item > .icon:hover{. }
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
Сообщение от lightalex 
Кто знает, можно ли как-то в css при hover блока (.icon) обратиться к его родителю (.item)?
Методом css нельзя
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
Сообщение от killlfun
.item > .icon:hover
блин, и в правду не то.
как бы обращение идет по иерархии сверху вниз, а не на оборот.
Регистрация: 23.07.2012
Сообщений: 69
Вот и стало вдруг интересно можно ли через CSS
А то все через JavaScript делаю
Возник вопрос, а не дурак ли я
636 / 523 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
lightalex к сожалению только через js, причем тенденций развития селекторов в этом направлении нет
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Появление дочернего блока при наведении на родительский
Прошу помочь. 1 блок видимый , 2 невидимый. Наводим на видимый блок > появляется невидимый. Почему.
Обращение к родителю Xpath
Никак не могу разобраться с xpath, и учебников на русском не могу найти, чтобы прям все возможности.
Обращение к объекту родителю
Здравствуйте, у меня вот такая ситуация: Я создал два класса: type TClass1 = class .
Обращение к родителю фрейма
if not (FRM.Parent is TTabSheet) then TTabSheet(FRM.Parent).Caption:= ‘test’; При обращении к.
Как обратиться к соседнему элементу в css
Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.
| Необходимые условия: | Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS. |
Комбинатор потомка
Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются
В приведённом ниже примере выбирается только тот элемент
, который находится внутри элемента с классом .box .
Дочерний комбинатор
Дочерний комбинатор ( > ) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы
, которые являются дочерними элементами , селектор пишется так:
-
, и присвоить им верхнюю границу красного цвета.
Соседний родственный комбинатор
Соседний родственный селектор ( + ) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы , которые идут сразу после элементов
:
Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к , и стилизуем его.
Если вы вставите какой-то другой элемент, например между и
, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.
Общий родственный комбинатор
Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (
). Чтобы выбрать все элементы , которые находятся в любом месте после элементов
, надо указать так:
В приведённом ниже примере мы выбираем все элементы
, которые идут после , и хотя в документе есть также , тем не менее
, который идёт после него, будет выбран.
Использование комбинаторов
-
, можно использовать следующую комбинацию:
Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.
Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.
Проверьте ваши навыки!
Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.
Двигаемся дальше
Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — CSS модель коробки.
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
Тег является дочерним по отношению к тегу
, поскольку он находится внутри этого контейнера. Соответственно
выступает в качестве родителя .
Теги и никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера
, не влияет на их отношение.
Соседними здесь являются теги и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Браузеры
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий ( B + /* плюс */ I ).
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
Элемент является дочерним по отношению к
, поскольку он находится внутри этого контейнера. Соответственно
выступает в качестве родителя .
Элементы и никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера
, не влияет на их отношение.
Соседними здесь являются элементы и , а также и . При этом и к соседним элементам не относятся из-за того, что между ними расположен контейнер .
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Примечание
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий ( B + /* плюс */ I ).
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Selectors Level 3 | Рекомендация |
| CSS 2.1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 7 | 8 | 12 | 1 | 3.5 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
CSS урок 3. Контекстные, соседние и дочерние селекторы
Заголовок
Первый параграф в div
Второй параграф в div
Просто полужирный текст в div
Первый параграф в body
Родительский элемент – тег, который содержит в себе рассматриваемый элемент.
В примере отношения родитель-ребенок:
- Элемент div (2 строка) — родительский по отношению к тегу h1 (3 строка), тогда как h1 — напротив, дочерний элемент (ребенок)
- Элемент p (4 строка) является родительским по отношению к strong (4 строка), тогда как strong — напротив, дочерний элемент (ребенок)
- Элемент div (2 строка) является родительским по отношению к strong (6 строка), тогда как strong — напротив, дочерний элемент (ребенок)
- Элемент p (8 строка) является родительским по отношению к strong (8 строка), тогда как strong — напротив, дочерний элемент (ребенок)
- Элемент body (1 строка) является родительским по отношению к div (2 строка) и p (8 строка)
Предок – элемент, который располагается на несколько уровней выше и содержит в себе рассматриваемый элемент.
В примере отношение предок-потомок:
- Элемент body является предком для элементов h1 (3 строка), p и strong (4 строка), p и strong (5 строка), strong (6 строка) и strong (8 строка); в то время как все, перечисленные элементы являются потомками body
- Элемент div (2 строка) является предком для элементов strong (4 и 5 строка); в то время как strong является потомком для div
Братский элемент (соседний) – элемент, который имеет общий родительский элемент с рассматриваемым.
В примере отношение соседи (братья):
- Элементы h1 (3 строка), p (4 строка), p (5 строка) и strong (6 строка) являются братьями или соседними элементами.
- Элементы div (2 строка) и p (8 строка) являются братьями или соседними элементами.
Контекстные селекторы CSS (предки-потомки)
Правила контекстных селекторов также распространяются и на отношение родитель-ребенок.
x — селектор-предок, y — селектор-потомок
Правило будет действовать на селектор y
Жирное начертание текста
Одновременно жирное начертание текста и выделенное цветом
Необходимо: Создать правило контекстных секторов для элемента b
Выполнение:
Результат:
В примере отношение предок-потомок характерно для элементов p и b в третьей строке. Но контекстные селекторы распространяются и на отношения родитель-ребенок, т.е. в примере — элементы p и b во второй строке.
Рассмотрим еще примеры, иллюстрирующие использование контекстных селекторов:
Соседние селекторы CSS (братья)
Стиль применяется для соседнего селектора y
Необходимо: Создать правило для соседнего селектора i
Выполнение:
Результат:
В примере теги i и b не перекрываются между собой другими элементами и поэтому представляют собой соседние селекторы. То, что они расположены внутри элемента p , никак не влияет на их отношение.
Дочерние селекторы в CSS (селектор родитель-ребенок)
Здесь x — родитель, y — ребенок
Правило будет действовать на дочерний селектор y
Кто средь друзей, тот силой не шути.
Необходимо: создать правило для дочернего селектора i (1 строка)