Classes CSS de nidificação
.class1{some stuff}
.class2{class1;some more stuff}
8 answers
Não é possível com baunilha CSS. No entanto, você pode usar algo como:
O Sass torna o CSS divertido outra vez. Sass é um extensão do CSS3, adicionando aninhados regras, variáveis, mixins, selector herança e muito mais. Está traduzido. a um CSS normal bem formatado, utilizando a ferramenta da linha de comandos ou a plugin de framework web.
Ou
Em vez de construir um selector longo nomes para especificar herança, em menos você pode simplesmente aninhar selectores dentro outros selectores. Isto faz legenda clara e folhas de estilo reduzido.
Exemplo:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Não com CSS puro. O equivalente mais próximo é este:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
Update: {[4] } existe uma especificação CSS3 para nidificação do nível 3 do CSS. Actualmente é um rascunho. https://tabatkins.github.io/specs/css-nesting/
Se aprovado, a sintaxe ficaria assim:
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;
}
}
Estatuto: A proposta especíca não foi aprovada pelo Grupo de trabalho.
Não directamente. Mas você pode usar extensões como LESS para ajudá-lo a alcançar o mesmo.
Pode usar agrupar selectores e / ou classes múltiplas num único elemento, ou pode usar uma linguagem de modelo e processá-la com software para escrever o seu CSS.
Ver também o meu artigo sobre a herança CSS .
Dê ao elemento um ID, e também um nome de classe. Depois podes aninhar o # IDName.className in your CSS.
Eis uma explicação melhor. https://css-tricks.com/multiple-class-id-selectors/class1 a todos os elementos que também têm class2. Se isto não for prático de fazer manualmente, você pode fazê-lo automaticamente com JavaScript (bastante fácil de fazer com jQuery).
Pode fazê-lo usando 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');
};