Родственные селекторы | WebReference
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h2~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h2>. При этом <h2> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.
Здесь красный цвет текста будет установлен для всех абзацев.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<p>Абзац 2</p>Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h2> и <p> не имеют общего родителя.
h2 ~ p { color: red; }
<h2>Заголовок</h2>
<p>Абзац 1</p>
<div><p>Абзац 2</p></div>
<p>Абзац 3</p>Синтаксис
E ~ F { Описание правил стиля }Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F.
Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует после него.
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Селекторы</title> <style> img { display: none; } #switch:checked ~ img { display: block; } </style> </head> <body> <form> <input type=»checkbox»> <label for=»switch»>Показать картинки</label> <img src=»image/thumb1.jpg» alt=»»> <img src=»image/thumb2.jpg» alt=»»> <img src=»image/thumb3.jpg» alt=»»> </form> </body> </html>Спецификация
| Спецификация | Статус |
|---|---|
| CSS Selectors Level 3 | Рекомендация |
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 7 | 12 | 1 | 9 | 3 | 1 |
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Групповые селекторы | CSS справочник
CSS селекторыЗначение и применение
В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа, селекторы класса, id селекторы и так далее. При перечислении любых селекторов необходимо обязательно разделять их запятой.
Поддержка браузерами
| Селектор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| element, element | Да | Да | Да | Да | Да | Да |
CSS синтаксис:
element, element {
блок объявлений;
}
Версия CSS
CSS1Пример использования
<style> h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */ background-color: green; /* задаем цвет заднего фона */ } .test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */ color: blue; /* задаем цвет текста */ } </style>
test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
background-color: green; /* задаем цвет заднего фона */
}
.test, #test { /* выбираем элементы с классом test и элемент с идентификатором test */
color: blue; /* задаем цвет текста */
}
</style>
Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет заднего фона зеленый.
Вторым групповым селектором мы указываем, что кроме заднего фона элементы с классами test и элемент с идентификатором test получат синий цвет текста.
Рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Групповые селекторы</title>
<style>
h2, h3,.test,#test { /* выбираем заголовки первого и второго уровня, элементы с классом test и элемент с идентификатором test */
color: red; /* задаем цвет текста */
}
h4,h5 { /* выбираем заголовки третьего и четвертого уровня */
color: blue; /* задаем цвет текста */
}
h2,h3,h4,h5 { /* выбираем заголовки от первого до четвертого уровня */
font-style: italic; /* задаем стиль шрифта - курсивное начертание */
}
</style>
</head>
<body>
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<p class = "test">Абзац с классом test</p>
<h4>Заголовок третьего уровня</h4>
<p id = "test">Абзац с идентификатором test</p>
<h5>Заголовок четвертого уровня</h5>
</body>
</html>
В этом примере мы использовали три групповых селектора:
- Первым групповым селектором мы указываем, что заголовки <h2> и <h3>, элементы с классом test и элемент с идентификатором test получат цвет текста красный.
- Вторым групповым селектором мы указываем, что заголовки <h4> и <h5> получат цвет текста синий.
- Третьим групповым селектором мы указываем, что все заголовки (от <h2> до <h5>) будут иметь курсивное начертание шрифта.
Результат нашего примера:
Пример использования групповых селекторов.CSS селекторыЧто такое селектор знака больше (>) в CSS?
Улучшить статью
Сохранить статью
- Последнее обновление: 30 июл, 2021
Улучшить статью
Сохранить статью
Селектор со знаком больше (>) в CSS используется для выбора элемента с определенным родительским элементом. Он называется селектором element > element . Он также известен как селектор дочернего комбинатора, что означает, что он выбирает только те элементы, которые являются прямыми дочерними элементами родителя. Он смотрит только на один уровень вниз по структуре разметки, а не глубже.
Синтаксис:
элемент > элемент {
// Свойство CSS
} Пример 1: В этом примере описывается селектор больше >.
> 9 0 0 39 < |
0040 .
|
0039 li 
разработка веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS. 
е. [a-z] и [A-Z] эквивалентны), за исключением частей, которые не находятся под контролем селекторов. Чувствительность к регистру имен элементов языка документа, имен атрибутов и значений атрибутов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML они чувствительны к регистру. Чувствительность к регистру префиксов пространств имен определяется в CSS3NAMESPACE.
Символы в селекторах можно экранировать с помощью обратной косой черты в соответствии с теми же правилами экранирования, что и в CSS. CSS21.