Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Is it possible to use CSS vars in CSS3 selectors?

Is it possible to use CSS vars in CSS3 selectors?

Problem

I’m trying some experiments with Css Vars, and I couldn’t get this to work or find any documentation about it. Does anyone know if it’s possible to use a CSS var in a CSS3 selector?

I made the following example to explain what I’m trying to do. This example is Chrome only.

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

Problem courtesy of: koningdavid

Solution

Cascading variables aren't defined for use with anything but style Property values at the moment, so no, they cannot be used in Selectors. Judging by their name, this makes sense, since only property declarations can cascade, not selectors. From the spec:

A variable can be used in place of any part of a value in any property on an element. Variables can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Is it possible to use CSS vars in CSS3 selectors?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×