Вложенность классов CSS

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

.class1{some stuff}

.class2{class1;some more stuff}
36
css css-selectors css3

8 ответов

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

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

или

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

пример:

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

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

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}
33

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

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

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;
  }
}

статус: предложение спек не было одобрено рабочей группой.

28

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

4

нет.

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

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

3

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

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

1

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

0

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