Saltar al contenido

Clases CSS anidadas

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

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *