Css селекторы: Универсальные селекторы — CSS | MDN

Эта часть страницы состоит из трех основных элементов: два элемента

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

Также обратите внимание, что стили не будут применяться к элементам внутри

или
элемента. При этом некоторые стили могут быть унаследованы этими внутренними элементами.
Селектор ID CSS
Селектор ID объявляется с использованием решётки или символа фунта ( # ), предшествующего строке символов. Строка символов определяется разработчиком. Этот селектор соответствует любому элементу HTML, который имеет атрибут ID с тем же значением, что и у селектора, но без символа решетки.
Вот пример:
 #контейнер {
ширина: 960 пикселей;
поле: 0 авто;
} 
Этот CSS использует селектор ID для сопоставления с HTML-элементом, например:
может быть любым элементом HTML. Пока у него есть атрибут ID со значением container , стили будут применяться.
Элемент идентификатора на веб-странице должен быть уникальным. То есть на любой странице должен быть только один элемент с идентификатором 9.0021 контейнер . Это делает селектор ID довольно негибким, потому что стили, используемые в наборе правил селектора ID, могут использоваться только один раз на странице.
Если на странице окажется более одного элемента с одним и тем же идентификатором, стили все равно будут применяться, но HTML на такой странице будет недействительным с технической точки зрения, поэтому этого следует избегать.
В дополнение к проблемам негибкости селекторы ID также имеют проблему очень высокой специфичности.
Селектор классов CSS
Селектор классов является наиболее полезным из всех селекторов CSS. Он объявляется точкой перед строкой из одного или нескольких символов. Как и в случае с селектором ID, эта строка символов определяется разработчиком. Селектор класса также соответствует всем элементам на странице, атрибут класса которых имеет то же значение, что и класс, за вычетом точки.
Возьмем следующий набор правил:
 .box {
отступ: 20 пикселей;
поле: 10 пикселей;
ширина: 240 пикселей;
} 
Эти стили будут применяться к следующему элементу HTML:
Те же стили будут также применяться к любым другим элементам HTML, имеющим атрибут class со значением box . Наличие нескольких элементов на одной странице с одним и тем же атрибутом класса выгодно, поскольку позволяет повторно использовать стили и избегать ненужного повторения. Вдобавок к этому селекторы классов имеют очень низкую специфичность — опять же, об этом позже.
Еще одна причина, по которой селектор классов является ценным союзником, заключается в том, что HTML позволяет добавлять несколько классов к одному элементу. Это делается путем разделения классов в атрибуте класса HTML с помощью пробелов. Вот пример:
Комбинатор потомков
Комбинаторы селекторов CSS объединяют селекторы для точного нацеливания. Селектор потомков или, точнее, комбинатор потомков, позволяет вам комбинировать два или более селектора, чтобы вы могли быть более конкретными в своем методе выбора. Например:
 #container .box {
плыть налево;
нижний отступ: 15px;
} 
Этот блок объявлений будет применяться ко всем элементам, имеющим класс box, которые находятся внутри элемента с идентификатором контейнер . Стоит отметить, что элемент .box не обязательно должен быть непосредственным дочерним элементом: может быть другой элемент, обертывающий . box , и стили все равно будут применяться.
Посмотрите на следующий HTML:
 

  <дел>
  <дел>

 
Если мы применим CSS из предыдущего примера к этому разделу HTML, единственным элементом, на который повлияют эти стили, будут первые 9 элементов.0021
элемент класса box . На элемент
, имеющий класс box-2 , стили не повлияют. Точно так же второй элемент
с классом box не будет затронут, поскольку он не находится внутри элемента с идентификатором container .
Вы должны быть осторожны при использовании комбинатора потомков в вашем CSS. Этот тип селектора, хотя и делает ваш CSS немного более удобным для чтения, может излишне ограничивать ваши стили определенным контекстом — в этом случае стили ограничены рамками внутри 9.0021 #container — что может сделать ваш код негибким.
Дочерний комбинатор
Селектор, использующий дочерний комбинатор , аналогичен селектору, использующему дочерний комбинатор, за исключением того, что он нацелен только на непосредственные дочерние элементы :
 #container > . box {
плыть налево;
нижний отступ: 15px;
} 
Это тот же код из примера комбинатора потомков, но вместо пробела мы используем символ «больше» (или правую угловую скобку).
В этом примере селектор будет соответствовать всем элементам, имеющим класс box и являющимся непосредственными дочерними элементами элемента #container . Это означает, что, в отличие от комбинатора потомков, не может быть другого элемента, обертывающего .box — это должен быть прямой дочерний элемент.
Вот пример HTML:
 

  <дел>
  <дел>
    <дел>
  
В этом примере CSS из предыдущего примера кода будет применяться только к первым
элемент класса box . Как видите, второй элемент
с классом box находится внутри другого элемента
. В результате стили не будут применяться к этому элементу, хотя он тоже имеет класс box .
Опять же, селекторы, использующие этот комбинатор, могут быть несколько ограничивающими, но они могут пригодиться, например, при стилизации вложенных списков.
Комбинатор общего назначения
Селектор, использующий общий комбинатор родственных элементов, сопоставляет элементы на основе отношений родственных элементов. То есть выбранные элементы находятся рядом друг с другом в HTML.
 h3 ~ р {
нижняя граница: 20px;
} 
Этот тип селектора объявляется с использованием символа тильды (~). В этом примере все элементы абзаца (
) будут оформлены в соответствии с указанными правилами, но только если они являются одноуровневыми элементами
. Между 9 могут быть и другие элементы.0021
и
, и стили все равно будут применяться.
Применим приведенный выше CSS к следующему HTML:
  
Title
 
Пример абзаца.
Пример абзаца.
Пример абзаца.
<дел>
  
Пример абзаца. 
В этом примере стили будут применяться только к первым трем элементам абзаца. Последний элемент абзаца не является родственным элементу
, потому что он находится внутри элемента
.
Смежный комбинатор родственных элементов
Селектор, который использует соседний комбинатор одноуровневых элементов, использует символ плюса (+) и почти такой же, как обычный одноуровневый селектор. Разница в том, что целевой элемент должен быть непосредственным братом, а не просто общим братом. Давайте посмотрим, как выглядит код CSS для этого:
 p + p {
отступ текста: 1.5em;
нижняя граница: 0;
} 
В этом примере указанные стили применяются только к элементам абзаца, которые следуют непосредственно за другими элементами абзаца. Это означает, что первый элемент абзаца на странице не получит эти стили. Кроме того, если между двумя абзацами появится другой элемент, ко второму абзацу из двух не будут применены стили.
Итак, если мы применим этот селектор к следующему HTML:
  
Title
 
Пример абзаца.
Пример абзаца.
Пример абзаца.
<дел>
  
Пример абзаца.
  
Пример абзаца.
 
… стили будут применяться только ко второму, третьему и пятому абзацам в этом разделе HTML.
Селектор атрибутов CSS
Селектор атрибутов выбирает элементы на основе наличия и/или значения атрибутов HTML и объявляется с помощью квадратных скобок:
 input[type="text"] {
цвет фона: #444;
ширина: 200 пикселей;
} 
Перед открывающей квадратной скобкой не должно быть пробела, если только вы не собираетесь использовать ее вместе с комбинатором-потомком. Приведенный выше CSS будет соответствовать следующему элементу:
Но это не будет соответствовать этому:
Селектор атрибута также может быть объявлен с использованием только самого атрибута без значения, вот так:
 ввод [тип] {
цвет фона: #444;
ширина: 200 пикселей;
} 
Это будет соответствовать всем элементам ввода с атрибутом типа, независимо от значения.
Вы также можете использовать селекторы атрибутов, не указывая ничего за пределами квадратных скобок (таким образом, таргетинг основан только на атрибуте, независимо от элемента). Также стоит отметить, что при использовании значений у вас есть возможность включать кавычки (одинарные или двойные) или нет.
CSS-селектор псевдокласса
Псевдокласс использует символ двоеточия для обозначения псевдосостояния, в котором может находиться элемент, например, состояние наведения или состояние активации. Давайте рассмотрим распространенный пример:
 a:hover {
красный цвет;
} 
В этом случае частью псевдокласса селектора является часть :hover . Здесь мы прикрепили этот псевдокласс ко всем якорным элементам (элементы и ). Это означает, что когда пользователь наводит указатель мыши на элемент , свойство color для этого элемента изменится на красный. Этот тип псевдокласса является динамическим псевдоклассом, поскольку он возникает только в ответ на взаимодействие с пользователем — в данном случае на перемещение мыши по целевому элементу.
Важно понимать, что эти типы селекторов не просто выбирают элементы; они выбирают элементы, находящиеся в определенном состоянии. Для целей этого примера состояние — это состояние «зависания».
Другие популярные псевдоклассы включают в себя:
• :visited : соответствует посещенным ссылкам
• : target : соответствует элементу, указанному в URL-адресе документа
.
• :first-child : нацелен на первый дочерний элемент
• :nth-child : выбирает определенные дочерние элементы
• : пусто : соответствует элементу без содержимого или дочерним элементам
• :checked : соответствует включенному флажку или переключателю
• :blank :стилизует пустое поле ввода
• : включено : соответствует включенному полю ввода
• : отключено : соответствует отключенному полю ввода
• : требуется : нацелен на обязательное поле ввода
• : действительно : соответствует действительному полю ввода
• : неверный : соответствует недопустимому полю ввода
• :playing : нацелен на воспроизводимый аудио- или видеоэлемент
• : is : собственное решение CSS для вложенных стилей
• :has : Идентичен :is , но отличается специфичностью.
• :where : синтаксис аналогичен :is() и :where() , но нацелен на элемент, который содержит  набор других
CSS-селектор псевдоэлементов
Наконец, в CSS есть селектор, называемый псевдоэлементом, и при правильном использовании он может быть очень полезным. Единственное предостережение заключается в том, что этот селектор сильно отличается от других рассмотренных нами примеров. Давайте посмотрим на псевдоэлемент в контексте:
 .container: перед {
содержание: "";
дисплей: блок;
ширина: 50 пикселей;
высота: 50 пикселей;
цвет фона: #141414;
} 
В этом примере используется один тип псевдоэлемента — псевдоэлемент :before . Как следует из названия, этот селектор вставляет воображаемый элемент на страницу внутри целевого элемента перед его содержимым.
 
Руководство по недавно поддерживаемым современным селекторам псевдоклассов CSS — Smashing Magazine
• Чтение: 11 мин.
• УСБ, Гиды, Браузеры, Специальные возможности
• Поделиться в Twitter, LinkedIn
Об авторе
Стефани Эклз (Stephanie Eckles) — инженер-программист, ориентированный на интерфейс. Она является автором ModernCSS.dev, который предлагает современные решения старых проблем CSS. Она … Больше о Stephanie ↬
Проект редактора рабочей группы CSS для селекторов уровня 4 включает несколько селекторов псевдоклассов, у которых уже есть предложения в большинстве современных браузеров. В этом руководстве будут рассмотрены те, которые в настоящее время имеют наилучшую поддержку, а также примеры, чтобы продемонстрировать, как вы можете начать использовать их сегодня!
Селекторы псевдокласса — это те, которые начинаются с символа двоеточия « : » и соответствуют состоянию текущего элемента. Состояние может быть связано с деревом документов или в ответ на изменение состояния, например :hover или :checked .
Несмотря на то, что этот псевдокласс определен в Selectors Level 4, он уже довольно давно поддерживает кроссбраузерность. Псевдокласс any-link будет соответствовать якорной гиперссылке, если она имеет ссылка . Это будет эквивалентно одновременному совпадению :link и :visited . По сути, это может уменьшить ваши стили на один селектор, если вы добавляете базовые свойства, такие как цвет , которые вы хотели бы применить ко всем ссылкам независимо от их статуса посещения.
: любая ссылка {
  цвет синий;
  смещение подчеркивания текста: 0,05 em;
}
 
Важное замечание о специфичности: :any-link победит a в качестве селектора, даже если и расположены ниже в каскаде, поскольку он имеет специфику класса. В следующем примере ссылки будут фиолетовыми:
 :any-link {
  цвет: фиолетовый;
}
а {
  красный цвет;
}
 
Итак, если вы вводите :any-link , имейте в виду, что вам нужно будет включить его в экземпляры a в качестве селектора, если они будут напрямую конкурировать за специфичность.
:focus-visible
Могу поспорить, что одним из самых распространенных нарушений доступности в Интернете является удаление схема для интерактивных элементов, таких как ссылки, кнопки и входные данные форм, для их состояния :focus . Одна из основных целей этого контура — служить визуальным индикатором для пользователей, которые в основном используют клавиатуру для навигации. Видимое состояние фокуса имеет решающее значение в качестве инструмента поиска пути, когда пользователи перемещаются по интерфейсу с помощью вкладок, а также для укрепления того, что является интерактивным элементом. В частности, видимый фокус описан в Критерии успеха WCAG 2.4.11: Внешний вид фокуса (минимум).
Псевдокласс :focus-visible предназначен для отображения кольца фокуса только тогда, когда пользовательский агент с помощью эвристики определяет, что оно должно быть видимым. Иными словами: браузеры будут определять , когда применять :focus-visible , основываясь на таких вещах, как метод ввода, тип элемента и контекст взаимодействия. В целях тестирования на настольном компьютере с клавиатурой и мышью вы должны увидеть стили :focus-visible , прикрепленные при переходе к интерактивному элементу, но не при щелчке по нему, за исключением ввода текста и текстовых областей, которые должны отображать :focus-visible для всех типов ввода фокуса.
Примечание : Дополнительные сведения см. в рабочем проекте спецификации :focus-visible .
Последние версии браузеров Firefox и Chromium, кажется, теперь обрабатывают :focus-visible при вводе формы в соответствии со спецификацией, в которой говорится, что UA должен удалять стили :focus , когда :focus-visible соответствует. Safari еще не поддерживает :focus-visible , поэтому нам нужно убедиться, что стиль :focus включен в качестве запасного варианта, чтобы избежать удаления контура для доступности.
Больше после прыжка! Продолжить чтение ниже ↓
При наличии кнопки и ввода текста со следующим набором стилей посмотрим, что произойдет:
 input:focus,
кнопка: фокус {
  контур: 2 пикселя сплошного синего цвета;
  смещение контура: 0,25 em;
}
ввод: фокус-видимый {
  контур: 2px сплошной прозрачный;
  цвет границы: синий;
}
кнопка: фокус: не (: фокус-видимый) {
  контур: нет;
}
кнопка: фокус видимый {
  контур: 2px сплошной прозрачный;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px синий;
}
 
Chromium и Firefox
• input
  Правильное удаление стилей :focus , когда элементы фокусируются с помощью мыши, вместо :focus-visible , что приводит к изменению border-color и скрытию1 контура 9002 при вводе с клавиатуры
• button
  Не только использует :focus-visible без дополнительного правила для button:focus:not(:focus-visible) , которое удаляет контур на :focus , but will allow visibility of the box-shadow only on keyboard input
Safari
• input
  Continues using only the :focus styles
• button
  This seems чтобы теперь частично соблюдать назначение :focus-visible на кнопке, скрывая стили :focus при нажатии, но по-прежнему показывая стили :focus при взаимодействии с клавиатурой
Итак, на данный момент рекомендуется продолжать включать стили :focus , а затем постепенно расширять до использования :focus-visible , что позволяет демонстрационный код. Вот вам CodePen для продолжения тестирования:
См. Pen [Тестирование приложения :focus-visible] (https://codepen.io/smashingmag/pen/MWJZbew) Стефани Эклз.
См. приложение Pen Testing :focus-visible от Стефани Эклс.
: фокус внутри
Псевдокласс :focus-within поддерживается всеми современными браузерами и действует почти как родительский селектор, но только в очень специфических условиях. При присоединении к содержащему элементу и совпадению дочернего элемента с :focus стили могут быть добавлены к содержащему элементу и/или к любым другим элементам внутри контейнера.
Практичным усовершенствованием для использования этого поведения является стиль метки формы , когда связанный ввод имеет фокус. Чтобы это работало, мы заворачиваем метку и ввод в контейнер, а затем присоединяем :focus-within в этот контейнер, а также выбор метки:
 . form-group:focus-within label {
  цвет синий;
}
 
Это приводит к тому, что метка становится синей, когда ввод находится в фокусе.
Эта демонстрация CodePen также включает добавление схемы непосредственно в контейнер .form-group :
См. Pen [Тестирование приложения :focus-within] (https://codepen.io/smashingmag/pen/xxgmREq) Стефани Эклз.
См. приложение Pen Testing :focus-within от Стефани Эклс.
:is()
Также известный как «сопоставление любому» псевдоклассу, :is() может принимать список селекторов, с которыми выполняется попытка сопоставления. Например, вместо того, чтобы перечислять стили заголовков по отдельности, вы можете сгруппировать их в селекторе :is(h2, h3, h4) .
Несколько уникальных поведений о списке селекторов :is() :
• Если селектор в списке недействителен, правило будет по-прежнему соответствовать допустимым селекторам. Дано :is(-ua-invalid, артикль, p) правило будет соответствовать артикулу и р .
• Вычисленная специфичность будет равна специфичности переданного селектора с наивысшей специфичностью. Например, :is(#id, p) будет иметь специфичность #id — 1.0.0 — тогда как :is(p, a) будет иметь специфичность 0.0.1.
Ключевым преимуществом является игнорирование недопустимых селекторов. При использовании других селекторов в группе, где один селектор недействителен, браузер отбрасывает все правило. Это вступает в игру в нескольких случаях, когда префиксы поставщиков все еще необходимы, а группировка селекторов с префиксом и без префикса приводит к сбою правила во всех браузерах. С :is() вы можете безопасно сгруппировать эти стили, и они будут применяться, когда они совпадают, и игнорироваться, если они не совпадают.
Для меня группировка стилей заголовков , как упоминалось ранее, уже является большой победой с этим селектором. Это также тот тип правила, который мне было бы удобно использовать без отступления при применении некритических стилей, таких как:
 :is(h2, h3, h4) {
  высота строки: 1,2;
}
: is (h3, h4): не (: первый ребенок) {
  поле сверху: 2em;
}
 
В этом примере (который исходит из стилей документа в моем проекте SmolCSS), имея большее line-height , унаследованная от базовых стилей или отсутствие margin-top , на самом деле не является проблемой для не поддерживающих браузеров. Это просто далеко от идеала. Чего вы не хотели бы использовать :is() , так это важных стилей макета , таких как Grid или Flex, которые значительно контролируют ваш интерфейс.
Кроме того, при привязке к другому селектору вы можете проверить, соответствует ли базовый селектор селектору-потомку в пределах :is() . Например, следующее правило выбирает только те абзацы, которые являются прямыми потомками статей. Универсальный селектор используется как ссылка на p селектор базы.
 p:is(статья > *)
 
Для наилучшей текущей поддержки, если вы хотите начать использовать ее, вы также захотите удвоить стили , включив повторяющиеся правила, используя :-webkit-any() и :matches() . Не забудьте сделать эти индивидуальные правила, иначе даже поддерживающий браузер их выбросит! Другими словами, включите все следующее:
 :matches(h2, h3, h4) { }
:-webkit-любой (h2, h3, h4) { }
: есть (h2, h3, h4) { }
 
На этом этапе стоит упомянуть, что наряду с самими новыми селекторами есть обновленная версия @supports , которая представляет собой @supports selector . Это также доступно как @supports not selector .
Примечание : В настоящее время (из современных браузеров) только Safari не поддерживает это правило at.
Вы можете проверить наличие поддержки :is() с помощью чего-то вроде следующего, но на самом деле вы потеряете поддержку Safari, поскольку Safari поддерживает :is() , но не поддерживает @supports selector .
 @supports selector(:is(h2)) {
  : есть (h2, h3, h4) {
    высота строки: 1,1;
  }
}
 
:where()
Псевдокласс :where() почти идентичен :is() , за исключением одного важного отличия: всегда будет иметь нулевую специфичность. Это имеет невероятные последствия для людей, которые создают фреймворки, темы и дизайн-системы . Использование :where() , автор может установить значения по умолчанию, а последующие разработчики могут включать переопределения или расширения без конфликта специфики.
Рассмотрим следующий набор стилей img . Используя :where() , даже с селектором более высокой специфичности специфичность остается нулевой. Как вы думаете, в следующем примере граница какого цвета будет у изображения?
 : где (статья img: не (: первый ребенок)) {
    граница: 5 пикселей сплошного красного цвета;
}
:где(статья) img {
  граница: 5px сплошной зеленый цвет;
}
картинка {
  граница: 5 пикселей сплошного оранжевого цвета;
}
 
Первое правило имеет нулевую специфичность, поскольку полностью содержится в :where() . Таким образом, непосредственно против второго правила выигрывает второе правило. Представляя селектор только элемента img в качестве последнего правила, он выиграет благодаря каскаду. Это связано с тем, что оно будет вычисляться с той же специфичностью, что и правило :where(article) img , поскольку часть :where() не увеличивает специфичность.
Использование :where() вместе с резервными вариантами немного сложнее из-за функции нулевой специфичности, так как именно из-за этой функции вы, вероятно, хочет, чтобы использовал его вместо :is() . И если вы добавите резервные правила, они, скорее всего, превзойдут :where() из-за самой их природы. И общая поддержка у него на лучше, чем у селектора @supports , поэтому попытка использовать его для создания отката вряд ли принесет большую выгоду (если вообще даст). По сути, помните о невозможности правильно создать резервные копии для :where() и тщательно проверьте свои собственные данные, чтобы определить, безопасно ли начинать использовать для вашей уникальной аудитории.
Вы можете дополнительно протестировать :where() с помощью следующего CodePen, который использует селекторы img из приведенного выше: smashingmag/pen/jOyXVMg) Стефани Эклз.
См. Pen Testing :where() специфичность Стефани Эклз.
Расширенный
:not()
Базовый селектор :not() поддерживается начиная с Internet Explorer 9. Но селекторы уровня 4 улучшают :not() , позволяя ему принимать список селекторов, точно так же, как :is() и :where() .
Следующие правила дают тот же результат в поддерживаемых браузерах:
 article :not(h3):not(h4):not(h5) {
  нижняя граница: 1.5em;
}
статья: не (h3, h4, h5) {
  нижняя граница: 1.5em;
}
 
Способность :not() принимать список селекторов отлично поддерживается современными браузерами.
Как мы видели с :is() , расширенный :not() также может содержать ссылку на базовый селектор как на потомка с использованием * . Этот CodePen демонстрирует эту способность, выбирая ссылки, которые являются , а не потомками nav .
См. Pen [Тестирование :not() с помощью селектора потомков](https://codepen.io/smashingmag/pen/BapvQQv) Стефани Эклс.
См. Pen Testing :not() с селектором потомков Стефани Эклз.
Бонус : предыдущая демонстрация также включает пример объединения :not() и :is() для выбора изображений, которые не являются соседними элементами h3 или h4 .
Предлагается, но «под угрозой» —
:has()
Последний псевдокласс, который является очень захватывающим предложением, но не имеет текущего браузера, реализующего его даже экспериментально, — это :has() . На самом деле, он указан в редакционном черновике Selector Level 4 как «находящийся под угрозой», что означает, что он испытывает трудности с завершением его реализации, и поэтому он может исключить из рекомендации.
В случае реализации :has() , по сути, это был бы «родительский селектор», о котором мечтали многие специалисты по CSS. Это будет работать с логикой, аналогичной комбинации :focus-within и :is() с селекторами потомков, где вы ищете наличие потомков , но применяемый стиль будет применяться к родительскому элементу.
Согласно следующему правилу, если бы навигация содержала кнопку, то отступы сверху и снизу у навигации были бы меньше:
 навигация {
  набивка: 0,75 бэр 0,25 бэр;
навигация: имеет (кнопка) {
  набивка-верх: 0,25 бэр;
  прокладка-дно: 0,25 бэр;
}
 
Опять же, это , а не , который в настоящее время реализован в любом браузере даже экспериментально — но об этом интересно подумать! Робин Рендл предоставил дополнительную информацию об этом будущем селекторе на CSS-Tricks.
Почетное упоминание с уровня 3:
:пусто
Полезный псевдокласс, который вы, возможно, пропустили на уровне селекторов 3: :пусто , который соответствует элементу, если у него нет дочерних элементов, включая текстовые узлы.
Правило p:пусто будет соответствовать
, но не
Hello
.
Одним из способов использования :пусто является скрытие элементов, которые, возможно, являются заполнителями для динамического содержимого, заполняемого JavaScript. Возможно, у вас есть элемент div, который будет получать результаты поиска, и когда он будет заполнен, он будет иметь рамку и некоторый отступ. Но пока нет результатов, вы не хотите, чтобы он занимал место на странице. Использование :пусто вы можете скрыть его с помощью:
 .search-results:empty {
  дисплей: нет;
}
 
Возможно, вы думаете о добавлении сообщения в пустом состоянии и испытываете искушение добавить его с псевдоэлементом и содержимым . Ловушка здесь заключается в том, что сообщения могут быть недоступны для пользователей вспомогательных технологий, которые несовместимы с тем, могут ли они получить доступ к содержимому .
No related posts.