Luego de de una extensa compilación de datos pudimos resolver esta duda que presentan algunos usuarios. Te compartimos la solución y nuestro deseo es serte de mucha apoyo.
Solución:
No es posible con CSS vainilla. Sin embargo, puedes usar algo como:
- Hablar con descaro a
Sass vuelve a hacer divertido el CSS. 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 mediante la herramienta de línea de comandos o un complemento de marco web.
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 más clara y las hojas de estilo más cortas.
Ejemplo:
#header
color: red;
a
font-weight: bold;
text-decoration: none;
Actualización 1: Hay una especificación CSS3 para el anidamiento de nivel 3 de CSS. Actualmente es un borrador. https://tabatkins.github.io/specs/css-nesting/
Actualización 2 (2019): Ahora tenemos un borrador de CSSWG https://drafts.csswg.org/css-nesting-1/
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;
.foo
color: red;
@nest & > .bar
color: blue;
.foo
color: red;
@nest .parent &
color: blue;
Estado:La propuesta de especificación original de 2015 no fue aprobada por el grupo de trabajo.
No con CSS puro. El equivalente más cercano es este:
.class1, .class2
some stuff
.class2
some more stuff