Clases CSS de anidamiento

¿Puedo hacer algo como lo siguiente?

.class1{some stuff} .class2{class1;some more stuff} 

No es posible con CSS de vanilla. Sin embargo, puedes usar algo como:

  • Hablar con descaro a

Sass hace CSS divertido de nuevo. Sass es una extensión de CSS3, que agrega reglas anidadas, variables, mixins, herencia de selector y más. Se traduce a CSS estándar bien formateado utilizando la herramienta de línea de comandos o un complemento de web-framework.

O

  • Menos

En lugar de construir nombres de selector largos para especificar la herencia, en Less puede simplemente anidar selectores dentro de otros selectores. Esto hace que la herencia sea clara y las hojas de estilo más cortas.

Ejemplo:

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

No con CSS puro El equivalente más cercano es este:

 .class1, .class2 { some stuff } .class2 { some more stuff } 

Actualización: hay una especificación CSS3 para el anidamiento de nivel 3 de CSS. Actualmente es un borrador. https://tabatkins.github.io/specs/css-nesting/

Si se aprueba, la syntax se vería así:

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

Estado: la propuesta de especificación no fue aprobada por el Grupo de Trabajo.

No directamente. Pero puede usar extensiones como LESS para ayudarlo a lograr lo mismo.

No.

Puede usar selectores de agrupación y / o múltiples clases en un solo elemento, o puede usar un lenguaje de plantilla y procesarlo con software para escribir su CSS.

Ver también mi artículo sobre herencia de CSS .

Prueba esto…

Proporcione al elemento una ID y también un Nombre de clase. Luego puede anidar el # IDName.className en su CSS.

Aquí hay una mejor explicación https://css-tricks.com/multiple-class-id-selectors/

No creo que esto sea posible. Puede agregar class1 a todos los elementos que también tienen class2 . Si no es práctico hacerlo manualmente, puede hacerlo automáticamente con JavaScript (bastante fácil de hacer con jQuery).

Puedes hacerlo 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'); };