В css знак: Что в CSS означает знак «>»? — Хабр Q&A

Leave a Comment / Css / By /

Родственные селекторы | CSS | 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 (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

7121931
1193
Браузеры

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

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

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

Почему у !important в CSS восклицательный знак в начале? — CSS-LIVE

Непостижимые алгоритмы Твиттера принесли мне в ленту занятный вопрос Саймона Хойберга, автора нескольких книг про JavaScript:

Почему ‘!important’ перекрывает значения в css? 🤔

Для меня это читается как «not important», т.

е. «не важно», и я ждал бы от него обратного 😅

Действительно, для программистов, привыкших обозначать знаком ! операцию отрицания (инверсии), эта запись выглядит очень нелогично. Ее даже включили в список ошибок, допущенных при проектировании CSS (последний пункт).

И мне вдруг пришел в голову неожиданный ответ на этот вопрос, которым я хочу поделиться. Предупреждаю: это ни разу не официальное определение из спецификации, а скорее полушуточный мнемонический прием, поясняющий эту «странность» и, как мне кажется, помогающий лучше понять и запомнить ее логику.

Всё дело в том, что конструкция !important, хотя и считается единой в синтаксисе, логически как бы состоит из двух частей. Одна — ключевое слово important, помечающее CSS-объявление как важное. А другая, ! — «оператор инверсии приоритета», меняющий на противоположный порядок важности почти во всех

критериях каскада.

Смотрите сами. Берем самый свежий из почти готовых модулей каскада — 5 уровня:

  • Первый критерий каскада — происхождение стилей. Для обычных стилей авторские (т.е. стили сайта) приоритетнее пользовательских, а те — приоритетнее дефолтных стилей браузера. Для !important-стилей же самые приоритетные — браузерные, а самые «слабые» — стили сайта: всё наоборот!
  • Второй критерий — контекст инкапсуляции, т.е., по-простому, глубина вложенности теневых DOM-деревьев в «матрёшке» из нативных веб-компонентов. Опять же: для обычных свойств приоритетнее пришедшие из самого внешнего контекста, чтобы вся «матрёшка» была оформлена единообразно и выглядела цельной. А для
    !important    -стилей, наоборот, приоритетнее стили самого внутреннего компонента! Чтобы что-то действительно важное для компонента сохранялось, в какой контекст бы его ни запихнули.
  • Третьим критерием отдельно вынесены стили из атрибута style: тут инвертировать нечего, так что инверсия ни на что не влияет.
  • А вот четвертый критерий — новинка сезона, каскадные слои. И снова та же логика: для обычных стилей «побеждают» те, чей слой указан последним, а для !important-ов — те, чей слой указан первым, наоборот!

Лишь два последних критерия каскада, специфичность селектора (пятый) и порядок появления в коде (шестой), !important не инвертирует: среди важных стилей, как и среди обычных, побеждает правило из более специфичного селектора, а при равной специфичности — идущее последним в коде. Но это логично: будь оно

и здесь наоборот, первый !important-стиль в коде было бы вообще ничем не перебить.

Стоит заметить, что сами по себе специфичность и !important, строго говоря, друг с другом никак не связаны: специфичность бывает у селектора, а !important — у конкретного объявления (свойства со значением). Во многих учебных материалах наличие !important рассматривается как «еще одна цифра в механизме специфичности», но это большое переупрощение. Каскад куда интереснее!

Возвращаясь к первому критерию — происхождению стилей — давние читатели нашего сайта наверняка вспомнят два случая, занимающие в каскаде особое место — стили анимаций и переходов (transition). К счастью, в них

!important не вмешивается: стили transition высчитываются браузером динамически для каждого кадра и «дописать» в них что-либо нельзя, а !important внутри @keyframes попросту невалиден. Так что стили переходов всегда будут перекрывать вообще всё — хоть с !important, хоть без, а анимации будут перекрывать все обычные стили, но перекрываться всеми важными. Баг с неправильным приоритетом анимаций (выше !important-стилей) остался только в Safari (обновлено 27.01.2023: баг пофикшен, ждем исправленного релиза!).

По-моему, такой взгляд на !important не только поможет легче запомнить очередность составляющих в каскаде (запоминаем «обычную» половину и добавляем «…а для !important всё наоборот»), но и нагляднее покажет, почему не стоит злоупотреблять им в повседневных задачах — ведь с инвертированным чем бы то ни было лучше не шутить:

Все ведь видели фильм
про «инвертированное оружие»?. .

Так что пусть !important останется только для действительно важных вещей, как гарантия их постоянства. А для повседневных задач в CSS-каскаде найдется немало других, не менее мощных и более полезных инструментов (кстати, самое время их осваивать 😉). А вы что думаете?

P.S. Это тоже может быть интересно:

Понимание использования символов +, > и ~ в селекторах CSS | by Aniket Kudale

Photo by Max Nelson on Unsplash

Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

Комбинатор — это то, что объясняет взаимосвязь между селекторами.

В CSS есть четыре разных комбинатора:

  • Селектор потомков (пробел)
  • Селектор потомков (>)
  • Селектор соседнего элемента (+)
  • Селектор общего элемента (~)

Давайте посмотрим, как мы можем использовать различные символы (+, > и ~) в селекторах CSS и их различия.

Давайте начнем с примера HTML.

 
 
 
Яблоко
 
 
 
 
Одно яблоко в день избавит вас от доктора!
 
 
 
 
Банан
 
 < p>Вишня

1. Космос

Это один из наиболее часто используемых селекторов в CSS.

 div.container p { 
  размер шрифта  : 20px; 
 }

Как видно из приведенного выше кода, между div.container и p есть пробел. Он называется селектором Descendant . Он будет нацелен на все теги

внутри контейнера div. То есть все элементы

, которые являются дочерними элементами #container на любой глубине.

2. Символ «>»

Это называется дочерним селектором. Правила CSS будут применяться к элементам, которые прямые детей конкретного элемента.

 div.container > p { 
  border-bottom  : 1px пунктирная черная; 
 }

Он будет нацелен (обозначен зеленой точкой на HTML-изображении) на все теги

, которые являются непосредственными дочерними элементами контейнера

, но дочерние элементы не будут выбраны (обозначены красной точкой).

3. Символ «+»

Это Селектор смежных братьев и сестер. Выбирает все элементы, которые являются соседними одноуровневыми элементами указанного элемента.

Родственные элементы должны иметь один и тот же родительский элемент, а «смежный» означает «сразу следующий» .

 div + p { 
  background-color  : желтый; 
 }

В нашем примере он будет нацелен на Banana только потому, что тег

идет сразу после тега

.

4.

Символ «~»

Это Общий селектор родственного элемента и аналогичный селектору соседнего родственного элемента. Он выбирает все следующих элементов, которые являются одноуровневыми элементами указанного элемента.

В следующем примере выбираются все следующих элементов

, которые являются одноуровневыми элементами

.

 div ~ p { 
  background-color  : желтый; 
 }

Он будет нацелен на теги Banana и Cherry

.

Надеюсь, вам понравился этот обзор CSS Combinators.

Понравилась моя статья? Кофе поддерживает мою мотивацию, купи мне одну! 😛

— Аникет Кудале

Что означает селектор CSS «+» (знак плюс)?

Улучшить статью

Сохранить статью

Нравится Статья

  • Последнее обновление: 04 Дек, 2018

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Нравится Статья

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

    Примечание: IE8 и более ранние версии должны быть объявлены для работы элемент + селектор элементов.

    Синтаксис: 

    элемент + элемент {
    // CSS-свойство
}

    Example:

    < html >

         < head >

             < заголовок >+ селектор знака заголовок >

    < Стиль >

    H3 + DIV {9 H3 + DIV {9 9 H3 + DIV {9 H3 + DIV {9 H3 + DIV {9 .

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

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