html - edteam - ¿Es posible usar CSS vars en selectores de CSS3?

usar variable javascript en css

Question

Estoy probando algunos experimentos con CSS vars, y no pude hacer que esto funcionara ni encontrar ningún tipo de documentación al respecto. ¿Alguien sabe si es posible usar una var CSS en un selector de CSS3?

Hice el siguiente ejemplo para explicar lo que trato de hacer. Este ejemplo es solo Chrome.

JSFIDDLE

http://jsfiddle.net/68Rrn/

CSS

:root {
    -webkit-var-count: 5; /* define my var! */
}

li {
    width:100px;
    height:100px;
    background-color:blue;
    display:inline-block;
    list-style:none;
}


ul li:nth-child(4) {
    background-color:red;
}

ul li:nth-child(-webkit-var(count)) { /* I can''t get this working, is it even supported? I''m trying to target the 5th element with my var. */
    background-color:black;
}

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

Las variables en cascada (es decir, la notación var() ) no están definidas para su uso con declaraciones de propiedades, por lo que no, no se pueden usar en selectores. A juzgar por su nombre, esto tiene sentido, ya que solo las declaraciones de propiedad pueden entrar en cascada, no los selectores. De la especificación :

Se puede usar una variable en lugar de cualquier parte de un valor en cualquier propiedad de un elemento. Las variables no se pueden usar como nombres de propiedad, selectores o cualquier otra cosa además de los valores de propiedad. (Hacerlo normalmente produce una sintaxis inválida, o bien un valor cuyo significado no tiene conexión con la variable).