Есть ли краткая форма для этого селектора CSS
Я сталкивался с этим много раз раньше, и мне было интересно, можно ли написать это более простым и менее избыточным способом.
Предположим, у нас есть этот HTML:
<div class = "wrapperClass">
<div class = "someClass">
<h1>This is a title</h1>
</div>
</div>
Если я хочу стилизовать элемент <h1>, я поступлю так:
.wrapperClass .someClass h1 {
color: red;
}
Предположим, существует вероятность того, что пользователь использует <h2>, <h3>, <h4>, <h5> or even a <h6>, и нам также необходимо рассмотреть эти случаи.
Моя инструкция CSS теперь будет выглядеть так:
.wrapperClass .someClass h1, .wrapperclass .someClass h2, .wrapperClass .someClass h3 ...
Это заявление действительно длинное; вот почему мне интересно, есть ли краткая форма для такого рода случаев или нет.
Это невозможно в стандартном CSS, и это одна из причин, почему препроцессоры CSS, такие как LESS и SASS, становятся популярными.
В CSS4 это отсортировано - developer.mozilla.org/en-US/docs/Web/CSS/:is
Ответы 5
(В настоящее время) нет селектора любой заголовок, но есть альтернатива с некоторыми ограничениями:
.wrapperClass .someClass > *
Он будет соответствовать элементу любой, который является прямым потомком .someClass.
Вы можете использовать Sass:
.wrapperClass {
.someClass {
h1, h2, h3, h4, h5, h6 {
color: red;
}
}
}
Использование с CSS и Sass / Scss.
/* Using space means any of its child element */
.className * { <element class = "className">
pointer-events:none; …
} <element>
/* Using `>` symbol means immediate child element */
.className > * { <element class = "className">
pointer-events:none; <element>
}
.list > ul > li:only-child {color:red}
.list > ul > li:first-child {color:green}
.list > ul > li:last-child {color:blue}
.list > ul > li:nth-child(2) {color:blue}
.list > ul > li:not(.className) {color:blue}
CSS selectors define the elements to which a set of CSS rules apply.
Child combinator [A> B] «Комбинатор > выбирает узлы, которые являются прямыми дочерними элементами первого элемента.
Descendant combinator [AB] «Комбинатор (пробел) выбирает узлы, которые являются потомками первого элемента.
Universal selector [*] «* будет соответствовать всем элементам документа.
При написании HTML вы, вероятно, заметили, что он имеет четкую вложенную и визуальную иерархию. CSS, с другой стороны, этого не делает.
.className {
.className2 {
color: red;
width: 600px / 960px * 100%;
}
}
Вы можете пропустить один родительский класс дочернего элемента, и должен применяться определенный элемент, а не для всех элементов. Конкретные элементы, которые он находит, сравниваются быстрее, чем универсальный селектор.
.someClass h1, .someClass h2, ....{
color: red;
}
Да, вы можете использовать Sass, чтобы упростить эту задачу, вот ваш пример с использованием цикла Sass for:
@for $i from 1 through 6 {
.wrapperClass .someClass h#{$i} {
color: red;
}
}
Вставьте этот фрагмент в игровую площадку Sass здесь, чтобы проверить результат: https://www.sassmeister.com/
Взгляните на LESS или SASS