it-swarm.com.ru

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

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

.class1{some stuff}

.class2{class1;some more stuff}
39
kralco626

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

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

Или же

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

Пример:

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

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

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}
35
cdhowie

Update: Существует спецификация CSS3 для вложенности уровня 3. В настоящее время это черновик . 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;
  }
}

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

30
etoxin

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

4
RabidFire

Нет.

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

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

3
Quentin

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

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

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

1
Oz The Tech Guy

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

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

0
Kyle