Как обратиться к соседнему элементу в css
Перейти к содержимому

Как обратиться к соседнему элементу в css

  • автор:

Селектор левых соседей

Столкнулся с проблемой: нужно разместить стиль для соседей, которые находится слева от элемента. В моём случае, нужно, чтобы ul элемент красил элемент a в красный. Вот мой html код:

Конечно, у меня у второго меню стиль position:absolute и можно просто сделать вот так:

ul > li > ul ul > li > ul ~ a

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

Отслеживать
72.4k 12 12 золотых знаков 92 92 серебряных знака 180 180 бронзовых знаков
задан 29 дек 2016 в 8:36
15.9k 8 8 золотых знаков 52 52 серебряных знака 100 100 бронзовых знаков
В css нет селектора позволяющего выбирать соседние элементы слева.
29 дек 2016 в 8:48
@Grundy, и это плохо
29 дек 2016 в 8:50
ассоциация:stackoverflow.com/questions/1817792/…
14 янв 2017 в 17:43

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

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

Поэтому да, только

  1. Через класс для соответствующего элемента. Просто добавить класс в разметку вручную.
  2. Псевдоклассы nth-child и подобные, если это подходит для данного случая.
  3. Инвертирование разметки (расположение элементов в обратном порядке в разметке) и применение flexbox. Мы можем инвертировать элементы либо через row-reverse / column-reverse , либо через свойство order . Допустим есть элементы first и second . И нужно добавить селектор, когда first перед second . Для этого нужно их поменять местами, затем применить селектор second + first . Первый способ (предпочтительный): Затем присваиваем контейнеру flex-direction: row-reverse; или flex-direction: column-reverse; в зависимости от разметки:

.flex < display: flex; flex-direction: row-reverse; >.second + .first
 
Second
First

Второй способ: Затем делаем order second меньше first :

.flex < display: flex; >.second + .first < color: red; margin-right: 10px; >.second < order: 2; >.first
 
Second
First

Соседний селектор в CSS

Соседний селектор + позволяет выбрать элемент по его соседу сверху.

Синтаксис

селектор1 + селектор2 < >

Пример

Давайте обратимся ко всем тегам p , непосредственно находящимся после тегов h2 , и покрасим их в красный цвет:

text

+

h2 + p < color: red; >

Пример

Давайте обратимся ко всем тегам p , непосредственно находящимся после элементов с классом .test , и покрасим их в красный цвет:

Пример

Давайте обратимся ко всем элементам с классом .elem , непосредственно находящимся после элементов с классом .test , и покрасим их в красный цвет:

Смотрите также

  • Дочерний селектор,
    который позволяет выбрать элементы по непосредственной вложенности
  • Контекстный селектор,
    который позволяет выбрать элемент по его родителю
  • Родственный селектор,
    который позволяет выбрать элементы после заданного
  • Универсальный селектор,
    который позволяет выбрать все элементы

Селекторы — Основы верстки контента

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

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

Выбор соседнего элемента

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

  class="time">.  class="timer">.  

По условию нашей задачи элемент timer полностью зависит от блока time . Предположим, что стиль таймера меняется в зависимости от наличия элемента с классом time . Есть несколько путей решения такой задачи:

  1. Положить оба элемента в единого родителя и дать им уникальные классы для разных ситуаций.
  2. Воспользоваться селектором соседнего элемента.

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

В CSS существует два селектора для выбора элемента, который лежит рядом с другим элементом:

  • A + B — выбор элемента B, который находится непосредственно после элемента A. Такой селектор называется смежным или соседним
  • A ~ B — выбор элемента B, который находится на том же уровне вложенности, что и A. При этом они имеют общего родителя и все элементы B находятся после элемента A в HTML. Такой селектор называется родственным.

Для примера выше отлично подойдет смежный селектор. Элементы time и timer идут друг за другом и являются дочерними элементами одного и того же родителя. Стилизуем элемент timer в зависимости от существования элемента time :

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

  .  class="time">. .  class="timer">.  

Схематически CSS будет выглядеть следующим образом:

.time ~ .timer  /* Стили элемента */ > 

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

Атрибуты — неизменная часть работы верстальщика и фронтенд-разработчика. Они не всегда несут в себе семантический смысл как, например, атрибуты alt , title , class , id и так далее.

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

Для стилизации таких элементов в CSS существуют специальные селекторы.

Самый простой селектор по атрибуту просто выбирает элемент по его атрибуту. В CSS атрибут записывается внутри квадратных скобок, это и будет самым простым селектором по атрибуту. Для демонстрации создадим свой атрибут data-full-screen — это будет пользовательский атрибут и вы его не найдете в документациях. Для тренировки можете его назвать совершенно другим образом — смысл действий от этого не изменится:

 data-full-screen> 
section[data-full-screen]  width: 100vw; height: 100vh; background: #2196f3; > 

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

 data-full-screen="true"> 
section[data-full-screen="true"]  width: 100vw; height: 100vh; background: #2196f3; > 

С опытом вы заметите, что многие JavaScript-библиотеки работают именно с пользовательскими атрибутами. Это позволяет добиться изолированности компонентов и их удобного переиспользования.

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

 data-nm-section="catalog">  data-nm-section="catalog-popular">  data-nm-section="catalog-new"> 

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

Все три секции имеют одинаковую приставку catalog. Это поможет отделить их от остальных названий секций с помощью конструкции [data-nm-section^=»catalog»] . Такой селектор выберет все элементы с атрибутом data-nm-section , значение которого начинается с catalog .

[data-nm-section^="catalog"]  width: 50px; height: 50px; margin-bottom: 10px; background: #2196f3; > 

Есть еще несколько похожих конструкций, которые ищут «вхождение» подстроки в строку:

  • [data-nm-section$=»catalog»] — вхождение подстроки в конце значения атрибута.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

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

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Синтаксис

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

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @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-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • 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-start-end-radius
  • border-start-start-radius
  • 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
  • gap
  • 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-block-size
  • 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
  • row-gap
  • 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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *