Псевдокласс CSS ":is()" с относительными селекторами
Я хочу стилизовать определенные «разделы, которые находятся непосредственно внутри тела» и «разделы, которые находятся непосредственно внутри элемента div непосредственно внутри тела» с помощью псевдокласса «:is()», без избыточности (с относительными селекторами).
У меня есть следующий код в файле index.html:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "style.css">
<title>Test :is() Selector</title>
</head>
<body>
<section>Section directly inside the body (styled).</section>
<div>
<section>Section directly inside a div which is directly inside the body (styled).</section>
</div>
<div>
<div>
<section>Section directly inside a div which is directly inside another div which is directly inside the body (not styled).</section>
</div>
</div>
</body>
</html>
и следующий CSS в файле style.css:
body > :is(section, div > section) {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
Я пробовал искать, но безуспешно, потому что все поиски с псевдоклассом «:is()» и относительными селекторами отправляют меня прямо к документации по относительным селекторам, поскольку «is» — очень распространенное слово без специальных символов. Это мой первый вопрос в стеке (хотя я читаю этот сайт каждый день в течение длительного времени), но мне нужен какой-то сложный селектор без избыточности, который имел бы тот же результат, что и этот CSS:
body > section, body > div > section {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
Мне не совсем понятно, в чем проблема. Это ваш :is не работает (не воспринимает дочерний раздел div)?
:is(body, body > div) > section, кажется, работает.
@CBroe да, это сработало, я не был уверен насчет использования псевдокласса «:is()», но по ссылкам @Temani Afif ниже я смог понять, вероятно, с этого момента я буду использовать этот псевдокласс больше в родительских селекторах, а не в дочерних селекторах.
@CBroe Да, этот селектор действительно работает, я подробно изучил, почему в своем ответе, и теперь сам это понимаю лучше 😆
Ответы 2
Вы можете использовать & и :is(), как показано ниже:
body {
:is(&, & > div) > section {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
}<section>Section directly inside the body (styled).</section>
<div>
<section>Section directly inside a div wich is directly insdie the body (styled).</section>
</div>
<div>
<div>
<section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
</div>
</div>Есть ли у вас идеи, почему :is(&, & > div) > section работает, а написано наоборот: & > :is(div > section, section) нет?
@ZachJensz stackoverflow.com/a/76839554/8620333
Это именно мой случай: я использовал вложенные селекторы для создания своего CSS-кода, он идеально вписывается в мой код. Насколько я понял на странице bram.us, селектор :is(&, & > div) > section будет соответствовать чему-то вроде :is(:is(body), :is(body) > div) > section, верно? Или я ошибся?
Если вы переместите селектор, вы можете заставить его работать:
:is(body, body > div) > section {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}<section>Section directly inside the body (styled).</section>
<div>
<section>Section directly inside a div wich is directly insdie the body (styled).</section>
</div>
<div>
<div>
<section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
</div>
</div>Если я правильно понимаю ваш вопрос (в противном случае отредактируйте свой вопрос для ясности):
Вы хотите добиться такого поведения:
body > section, body > div > section {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}
Но вы хотите сделать его более кратким, используя псевдокласс :is(), и когда вы говорите «без избыточности», вы имеете в виду сохранение селектора СУХИМ?
Текущий селектор DRY работает неправильно:
body > :is(section, div > section) {
background-color: lightblue;
padding: 10px;
border: 1px solid blue;
}<section>Section directly inside the body (styled).</section>
<div>
<section>Section directly inside a div wich is directly insdie the body (styled).</section>
</div>
<div>
<div>
<section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
</div>
</div>Думайте о :is() глобально, как будто он не видит остальную часть селектора вне себя.
Это ваш селектор:
body > :is(section, div > section)
Давайте запустим его для HTML-элемента, который дает неожиданные результаты:
<body>
...
<div>
<!-- Testing this section element -->
<section>
Section directly inside a div wich is directly insdie the body (styled).
</section>
</div>
...
</body>
- Элемент является разделом или разделом и прямым дочерним элементом div ✅
- Элемент является прямым дочерним элементом body ❌
Учитывая ваши требования к цели:
«Разделы, находящиеся непосредственно внутри тела» и «разделы, находящиеся непосредственно внутри элемента div непосредственно внутри тела»
Мы можем изменить селектор на:
:is(body, body > div) > section
Давайте запустим его с HTML-элементом, который дал неожиданные результаты:
<body>
...
<div>
<!-- Testing this section element -->
<section>
Section directly inside a div wich is directly insdie the body (styled).
</section>
</div>
...
</body>
- Элемент представляет собой раздел ✅
- Это прямой дочерний элемент
body❌ илиbody > div✅.
Где избыточность? Ваш пример
is()довольно прост. Вы могли бы сделать то же самое с вложением, но без особой выгоды.