Есть ли краткая форма для этого селектора CSS

Question

Я сталкивался с этим много раз прежде, и мне было интересно, можно ли написать это более простым и менее излишним способом.

Давайте предположим, что у нас есть этот 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 ...

Это утверждение очень длинное;вот почему мне интересно, есть ли краткая форма для таких случаев или нет.

Answer 1

Да, вы можете использовать Sass, чтобы сделать это проще, вот ваш пример использования цикла Sass for:

@for $i from 1 through 6 {
    .wrapperClass .someClass h#{$i} {
        color: red;
  }
}

Вставьте этот фрагмент в игровую площадку Sass, чтобы проверить вывод: https://www.sassmeister.com/

Answer 2

Вы можете пропустить один родительский класс дочернего элемента, к которому нужно применить определенный элемент, не для всех элементов.Определенные элементы он сравнивает быстрее, чем универсальный селектор.

.someClass h1, .someClass h2, ....{
  color: red;
}

Answer 3

Вы можете использовать Sass:

.wrapperClass {
  .someClass { 
    h1, h2, h3, h4, h5, h6 { 
      color: red;
    }
  }
}

Answer 4

Использование с 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 определяют элементы, к которым применяется набор правил CSS.

Child combinator [A> B] «Комбинатор > выбирает узлы, которые являются прямыми дочерними элементами первого элемента.Descendant combinator [AB] «Комбинатор (пробел) выбирает узлы, которые являются потомками первого элемента.Universal selector [*] «* будет соответствовать всем элементам документа.

Sass« CSS с суперспособностями

При написании HTML вы, вероятно, заметили, что он имеет четкую вложенную визуальную иерархиюCSS, с другой стороны, не.

.className {
    .className2 {
        color: red;
        width: 600px / 960px * 100%;
    }
}

Answer 5

(В настоящее время) нет любого заголовка селектора, но есть альтернатива с определенными ограничениями:

.wrapperClass .someClass > *

Это будет соответствовать любому элемент, который является прямым потомком .someClass.