una - seleccionar clase en css
Clases CSS de anidamiento (8)
No con CSS puro El equivalente más cercano es este:
.class1, .class2 {
some stuff
}
.class2 {
some more stuff
}
¿Puedo hacer algo como lo siguiente?
.class1{some stuff}
.class2{class1;some more stuff}
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).
No directamente. Pero puede usar extensiones como Less para ayudarlo a lograr lo mismo.
No es posible con CSS de vanilla. Sin embargo, puedes usar algo como:
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
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.
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/
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'');
};
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 sintaxis 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.