Can CSS vars be used in CSS3 selectors?

Question

I tried some experiments with CSS vars and I could not get this to work or find documentation about it. Does anyone know if CSS var can be used in CSS3 selector?

I made the following example to explain what I am trying to do. This example applies only to 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

Cascading variables (i.e. the notation var() ) are not defined for use with anything other than property declarations, so no, they cannot be used in selectors. Judging by their name, this makes sense, since only property declarations can be cascaded, not a selector. From spec :

A variable can be used instead of any part of the value in any property of an element. Variables cannot be used as property names, selectors, or anything else but property values. (This usually leads to invalid syntax, otherwise a value whose value is not associated with a variable.)