Соседние селекторы | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 7.0 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
<p>Lorem ipsum <b>dolor</b> sit amet.
</p>
Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>
Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Соседние селекторы</title>
<style>
b + i {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.
="значение"]
="значение"]Статьи по теме
Рецепты CSS
Селекторы | Основы верстки контента
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
В прошлых уроках и упражнениях мы использовали достаточно простые селекторы. Они позволяли выбрать элементы, к которым будут применены CSS правила. Вы уже умеете выбирать элемент по его тегу, классу, идентификатору и найти вложенный элемент.
CSS дает намного большие возможности по выбору элементов. В этом уроке мы изучим самые популярные селекторы второго и третьего уровня спецификации W3C. В конце урока будут оставлены ссылки на спецификации, в которых вы сможете узнать и о других селекторах.
Выбор соседнего элемента
Ранее использование селекторов указывало, какой конкретно элемент мы хотим выбрать и где он находится относительно своих родительских блоков.
В большинстве случаев этого достаточно для точного указания элемента, но бывают случаи, когда нужно выбрать соседний элемент, а не вложенный. Например,
<section> <div>...</div> <div>...</div> </section>
По условию нашей задачи элемент timer полностью зависит от блока time. Предположим, что стиль таймера меняется в зависимости от наличия элемента с классом time. Есть несколько путей решения такой задачи:
- Положить оба элемента в единого родителя и дать им уникальные классы для разных ситуаций.
- Воспользоваться селектором соседнего элемента.
Чаще всего, именно первый вариант будет предпочтительным. При этом вы не раз столкнетесь с ситуациями, когда это невозможно. Такое может происходить при динамическом добавлении элементов на страницу. И тут на помощь приходят селекторы.
В CSS существует два селектора для выбора элемента, который лежит рядом с другим элементом:
A + B— выбор элемента B, который находится непосредственно после элемента A. Такой селектор называется смежным или соседнимA ~ B— выбор элемента B, который находится на том же уровне вложенности, что и A. При этом они имеют общего родителя и все элементы B находятся после элемента A в HTML. Такой селектор называется родственным.
Такой селектор называется смежным или соседнимДля примера выше отлично подойдет смежный селектор. Элементы time и timer идут друг за другом и являются дочерними элементами одного и того же родителя. Стилизуем элемент timer в зависимости от существования элемента time:
Родственный селектор позволяет немного усложнить ситуацию. Ведь теперь будет возможность не просто выбрать соседний элемент, а элемент, лежащий на том же уровне. Изменим пример, который позволит наглядно продемонстрировать возможность родственного селектора.
<section> <h3>...</h3> <div>...</div> <h4>...</h4> <div>.
..</div>
</section>
Схематически CSS будет выглядеть следующим образом:
.time ~ .timer {
/* Стили элемента */
}
Селекторы по атрибуту
Атрибуты — неизменная часть работы верстальщика и фронтенд-разработчика. Они не всегда несут в себе семантический смысл, как например атрибут title, class, id и так далее.
HTML позволяет добавлять любые пользовательские атрибуты и работать с ними. Пользовательскими считаются такие атрибуты, которые мы определяем сами. Их не существует в документациях, спецификациях. Они нужны для разработчиков, чтобы удобнее обращаться к элементам или отделять похожие элементы. Целей может быть много и, с приобретением опыта, особенно при работе с языком JavaScript, вы заметите, что пользовательские атрибуты используются не так редко, как может показаться с самого начала.
Для стилизации таких элементов в CSS существуют специальные селекторы.
Самый простой селектор по атрибуту просто выбирает элемент по его атрибуту.
В CSS атрибут записывается внутри квадратных скобок, это и будет самым простым селектором по атрибуту. Для демонстрации создадим свой атрибут data-full-screen — это будет пользовательский атрибут и вы его не найдете в документациях. Для тренировки можете его назвать совершенно другим образом — смысл действий от этого не изменится:
<section data-full-screen></section>
section[data-full-screen] {
width: 100vw;
height: 100vh;
background: #2196f3;
}
Можно выбирать не только по названию атрибута, но и по его значению. В этом случае рядом с именем атрибута указывается его значение в следующем синтаксисе:
<section data-full-screen="true"></section>
section[data-full-screen="true"] {
width: 100vw;
height: 100vh;
background: #2196f3;
}
С опытом вы заметите, что многие JavaScript-библиотеки работают именно с пользовательскими атрибутами. Это позволяет добиться изолированности компонентов и их удобного переиспользования.
Есть еще несколько похожих конструкций, которые ищут «вхождение» подстроки в строку:
[data-nm-section$="catalog"]— вхождение подстроки в конце значения атрибута.
Селектор смежных братьев и сестер
Веб-обзор
июль 2000 г.
Как было показано в предыдущих статьях этой серии, в CSS появилось несколько новых интересных селекторов. Между универсальным селектором и дочерним селектором можно создать селекторы, которые были бы практически невозможны при использовании традиционных селекторов в стиле CSS1.
В этой части мы продолжаем эту тенденцию. Однако на этот раз мы поговорим о том, что практически невозможно сделать с помощью контекстных селекторов. С селектор соседнего брата, вы можете применять стили к элементам на основе элементов, которые непосредственно предшествуют им в документе.
Как это работает
Синтаксис достаточно прост: всего два или более селектора, разделенных знаком плюс ( + ).
Самая простая конструкция – это два элемента с плюсом между ними. Выбранным элементом будет тот, который следует непосредственно за символом плюса, но только если он следует за элементом, указанным перед плюсом. Например:
h2 + P {верхнее поле: 0;}
Правило будет применяться ко всем абзацам, которые следуют непосредственно за элементом h2 и имеют один и тот же родительский элемент. Отсюда и название: элементы должны иметь один и тот же родительский элемент, что делает их братьями и сестрами, и они должны располагаться рядом друг с другом в дереве документа.
Давайте рассмотрим это подробнее. Некоторое время изучите древовидное представление на рис. 1.
| Рис. 1. Поиск соседних одноуровневых элементов с помощью дерева документов. |
Одним из примеров смежных элементов одного уровня являются элементы EM и STRONG внутри абзаца.
На самом деле единственное место на рис. 1, где элементы не имеют смежных братьев и сестер, это место, где у них вообще нет братьев и сестер, например, элемент A ; и в неупорядоченном списке с тремя LI детьми. Там первый и третий элементов LI не являются соседними. Первый и второй являются смежными, как второй и третий, но первый и третий разделены вторым и, следовательно, не являются смежными.
Допустим, мы хотим, чтобы текст STRONG был зеленым, но только тогда, когда он следует за текстом EM . Правило для этого:
EM + STRONG {цвет: зеленый;}
Вернувшись к рисунку 1, мы видим, что элемент STRONG , который является частью абзаца, будет зеленым, а элемент STRONG , который является частью LI , — нет. Обратите внимание, что это верно, несмотря на то, что внутри абзаца может быть текст, который находится между 9Элементы 0016 EM и STRONG .
Например:
Этот абзац содержит некоторые выделенный текст и после что мы находим некоторые сильно подчеркнутые текст, который также зеленый, несмотря на промежуточный текст.
Текст между элементами не влияет на работу селектора. Это справедливо даже для элементов блочного уровня. Рассмотрим:
<дел>Привет, элемент h4
Вот некоторый текст, который является частью DIV, и не содержится в его дочернем элементе.Это короткий абзац
Если мы хотим выбрать только те абзацы, которые следуют за заголовками уровня h4, которые содержатся в разделе ( 
Таким образом:
Если предположить, что заголовок статьи представляет собой элемент 
Существуют ошибки в обработке селекторов соседних элементов в IE5 для Windows и Opera 3 для Windows.
По сути, объединяет два селектора CSS для уникальной идентификации элемента в документе. В CSS существует четыре различных типа комбинаторов, а именно: Общий родственный селектор (~) , Смежный одноуровневый селектор (+) , Дочерний селектор (>) и Селектор потомков (пробел) . Каждый из этих селекторов определяет уникальное отношение между двумя селекторами, что помогает в определении соединения и расположения контента в документе.
Со второй попытки вы также указываете название города в строке поиска, скажите «Ганди Чоук, Дели», это помогает сузить поиск и позволяет выбрать точное место, куда вы хотите отправиться.
Это помогает однозначно идентифицировать и выбирать только те элементы в документе, которые удовлетворяют заданной взаимосвязи . Комбинатор CSS следует следующему синтаксису:
Другими словами, он выбирает те элементы в документе, которые вложены в тот же родительский элемент, что и указанный элемент, а также присутствуют после этого элемента.
Допустим, мы хотим выбрать только те элементы
Как мы видим, мы хотим выбрать только те элементы
Выбирается любой элемент, представленный вторым селектором, который вложен на любом уровне под первым селектором .
Как мы видим, выбираются все абзацы под
Если мы хотим выбрать все элементы
Он также не выбирает никакую другую кнопку, которая не является прямым дочерним элементом поля класса. Таким образом, он нацелен на элемент кнопки без дополнительной сложности в коде разметки.