Вложенные CSS-классы

Question

Могу ли я сделать что-то вроде следующего?

.class1{some stuff}

.class2{class1;some more stuff}

Answer 1

Невозможно с ванильным CSS.Однако вы можете использовать что-то вроде:

• Sass

Sass снова делает CSS забавным.Sass - это расширение CSS3, добавляющее вложенные правила, переменные, миксины, наследование селектора и многое другое.Он переведен в хорошо отформатированный стандартный CSS с использованием инструмента командной строки или плагина веб-фреймворка.

Или

• Меньше

Вместо создания длинных имен селекторов для указания наследования, в Less вы можете просто вкладывать селекторы в другие селекторы.Это упрощает наследование и сокращает таблицы стилей.

Пример:

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Answer 2

Не с чистым CSS.Ближайший эквивалент такой:

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

Answer 3

Обновление 1: Существует спецификация CSS3 для вложенности уровня 3.В настоящее время это черновик.https://tabatkins.github.io/specs/css-nesting/

Обновление 2 (2019): Теперь у нас есть черновик CSSWG https://drafts.csswg.org/css-nesting-1/

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

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

Статус: Первоначальное предложение по спецификации на 2015 год не было утверждено Рабочей группой.

Answer 4

Не напрямую.Но вы можете использовать такие расширения, как LESS , чтобы помочь вам достичь того же.

Answer 5

Нет.

Вы можете использовать группировку селекторов и / или несколько классов на одном элементе, или вы можете использовать язык шаблонов и обрабатывать его с помощью программного обеспечения для написания вашего CSS.

См. Также мою статью о наследовании CSS .

Answer 6

Вы можете сделать это, используя Javascript:

static generateStyle = (parentSelector, allCss) => {
  const reg = /(.+?)\s?\{\s?(.+?)\s?\}+/g;
  const matches = allCss.match(reg);
  const styles = [];

  for (let i = 0; i < matches.length; i++) {
    const cssDecleration = matches[ i ];

    if (cssDecleration.indexOf('@media') === -1) {
      styles.push(`${ parentSelector } ${ cssDecleration }`);
    }
    else {
      const mediaPos = cssDecleration.indexOf('{');

      if (mediaPos === -1) {
        continue;
      }

      const mediaQuery = cssDecleration.substring(0, mediaPos);
      const rest = cssDecleration.substring(mediaPos);
      const restPlaced = MicroServiceData.generateStyle(parentSelector, rest);

      styles.push(`${ mediaQuery } ${ restPlaced }`);

    }
  }

  return styles.join('\n');
};

Answer 7

Попробуйте это ...

Дайте элементу идентификатор, а также имя класса. Затем вы можете вложить # IDName.className в свой CSS.

Вот лучшее объяснение https://css -tricks.com / множественные идентификаторы класса-селекторов /

Answer 8

Я не верю, что это возможно. Вы можете добавить class1 ко всем элементам, которые также имеют class2. Если это нецелесообразно делать вручную, вы можете сделать это автоматически с помощью JavaScript (довольно легко сделать с помощью jQuery).