3

Buenas, una duda que tengo. ¿Es posible, mediante CSS, anidar selectores?

En mi proyecto, tengo varios estilos que tengo dependientes de algunos selectores que son comunes en distintos sitios, por ejemplo:

.menu1 { declaracion menu1 ... }
.menu1 .div1{ declaracion xxxx ... }
.menu1 .div2{ declaracion yyyy ... }
.menu1 .div3{ declaracion zzzz ... }

.menu2 { declaracion menu2 ... }
.menu2 .div1{ declaracion vvvv ... }
.menu2 .div3{ declaracion wwww ... }

En lugar de definirlas así, ¿hay alguna manera de anidarlas para no tener que volver a escribir el primer selector? Algo tal y como así:

.menu1 {
     declaracion menu1 ...
    .div1{ declaracion xxxx ... }
    .div2{ declaracion yyyy ... }
    .div3{ declaracion zzzz ... }
}

.menu2 {
     declaracion menu2 ...
    .div1{ declaracion vvvv ... }
    .div3{ declaracion wwww ... }
}

No se si esto es posible con CSS (no tengo ni SaSS ni LeSS en el proyecto). O si existe otro método más eficaz que hacerlo como lo estoy haciendo. Busco documentación al respecto pero no encuentro nada y ya no se si es que no estoy buscando bien o no se puede hacer.

Un saludo y gracias

1
  • 3
    Creo que son SaSS y LeSS si que se puede hacer algo parecido a lo que tu quieres, pero con CSS puro no se puede. Tienes que definirlos tal y como lo indicas al inicio.
    – Alejandro
    Commented el 1 feb. 2018 a las 16:06

3 respuestas 3

4

Actualmente con css propiamente no es posible.

Propiamente es un feature que está disponible unicamente usando en preprocesador como SASS, STYLUS o LESS.

Sin embargo, en un futuro (aún muy lejano) puede que exista, aunque ni siquiera está contemplado como borrador por la w3g, ya que en el informe del estado actual de css3, futuras implementaciones y otros "working drafts" no hay nada que mencione sobre esto o algo similar.

Hay muchas ideas en el tintero como las reglas @apply, pero tal cual "anidaciones" no existe en ninguna documentación oficial.

2

Necesitas usar algún proprocesador de texto como te han comentado, Yo te recomiendo SASS o LESS.

La estructura de anidación es:

li {
    propiedades del selector li

    a {
        propiedades del selector a, que viene a ser un "li a"
    }
}
2

Por desgracia, esto no es posible hasta el momento con CSS puro.

Sin embargo, si que es posible realizarlo aunque para ello, necesitarás usar un preprocesador, como puede ser SASS o LESS. Estos preprocesadores te permiten utilizar variables, condiciones, bucles o incluso funciones.

De esta manera, te permite modularizar tu CSS, ya que también te permiten dividir tu CSS en varios archivos, que finalmente serán unidos en un único fichero de CSS.

Te recomiendo que lo utilices en tu entorno de desarrollo ya que te facilitará mucho más el mantenimiento de tu CSS y te quedará un fichero mucho más limpio y simple. Al ir a pasarlo a producción, compilarás el código que hayas generado con tu preprocesador, y generararás un único fichero de CSS puro, que será el que adjuntes como hoja de estilos a tu proyecto final.

En tu caso, y utilizando SASS, el ejemplo sería exactamente como lo has definido:

.menu1 {
     declaracion menu1 ...
    .div1{ declaracion xxxx ... }
    .div2{ declaracion yyyy ... }
    .div3{ declaracion zzzz ... }
}

.menu2 {
     declaracion menu2 ...
    .div1{ declaracion vvvv ... }
    .div3{ declaracion wwww ... }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.