usar - MENOS CSS: accediendo a las clases más arriba del árbol dom dentro de una clase anidada
que es un selector en css (2)
¡Sí! (una actualización)
¡Cuando probé esto aquí , funcionó!
.container {
.logo {
background:url(/images/logo.gif);
.svg & {
background:url(/images/svg-logo.svg);
}
}
}
Quiero poder acceder a clases más arriba del árbol dom desde dentro de una clase anidada usando LESS CSS, ver ejemplo:
HTML:
<html class="svg">
<body>
<div class="content">
<div class="container">
<div class="logo"></div>
</div>
</body>
</html>
MENOS:
.container {
.logo {
background:url(/images/ws-logo.gif);
}
}
Quiero apuntar a la clase .svg en la etiqueta html desde la regla anidada de .logo, para mantener las cosas ordenadas en lugar de escribir otra regla como esta:
.svg {
.container {
.logo {
background:url(/images/logo.svg);
}
}
}
Entonces, idealmente algo como esto:
.container {
.logo {
background:url(/images/logo.gif);
(some-symbol).svg {
background:url(/images/svg-logo.svg);
}
}
}
Estoy usando modernizr para detectar svg support.
¿Alguien sabe si esto es posible? ¿O tienes alguna recomendación?
Esto no es posible porque no puede "retroceder" en la ruta para agregar otra clase a un elemento primario. En cambio, solo escribe otra regla:
.svg .container .logo,
/* or perhaps even simpler, however be aware of rule specificity*/
.svg .logo{
background:url(/images/logo.svg);
}
No es gran cosa, ¿verdad?
En aras de la exhaustividad: puede hacer referencia al elemento real mediante el símbolo & . Esto tiene sentido si quiere apuntar a pseudo-clases / elementos o clases adicionales del elemento actual:
.container {
.logo {
/* styles for ".container .logo" */
}
&:hover .logo{
/* styles for ".container .logo"
The hover however is bound to the .container element
equals the following selector: .container:hover .logo */
}
}