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

Ответ 1

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

• Sass

Сасс снова добавляет CSS. Сасс - это расширение CSS3, добавление вложенных правила, переменные, mixins, селектор наследование и многое другое. Его перевод для хорошо отформатированного стандартного CSS с использованием инструмент командной строки или плагин web-framework.

или

• Less

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

Пример:

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

Ответ 2

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

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}

Ответ 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 год не была утверждена Рабочей группой.

Ответ 4

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

Ответ 5

Нет.

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

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

Ответ 6

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

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

Здесь лучшее объяснение https://css-tricks.com/multiple-class-id-selectors/

Ответ 7

Вы можете сделать это с помощью 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');
};

Ответ 8

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