20

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

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Paul D. Waite
  • 93,468
  • 54
  • 192
  • 264
koningdavid
  • 7,531
  • 5
  • 33
  • 46

1 Answers1

25

Cascading variables (i.e. the var() notation) aren't defined for use with anything but property declarations, 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.)

BoltClock
  • 665,005
  • 155
  • 1,345
  • 1,328
  • This was exacly what I was looking for! Thanks! Kinda sucks tho :) (cannot accept your answer yet, need to wait 9 more minutes ;D) – koningdavid Jul 30 '13 at 16:05
  • 2
    @Muhammad Umer: Uhhh, what does LESS have to do with anything? Since when did it become "common sense" to use LESS? – BoltClock Aug 02 '13 at 06:36
  • i meant that it has common sense built in it. It won't be awkward to learn. Like you know how it should be possible to defined something once and then reference to it like variables. It has that. – Muhammad Umer Aug 03 '13 at 02:37
  • And what does that have to do with this exactly? – BoltClock Aug 04 '13 at 08:10
  • 2
    We should be preparing to adopt native CSS variables, rather than using preprocessors just for that purpose - preprocessors are great for some things, but need to be updated to take account of changes in native CSS. – Dave Everitt Feb 03 '18 at 13:21
  • 1
    @Dave Everitt: Heh, four and a half years later I still have no idea what the other commenter was on about, or when or why preprocessors even entered the conversation. – BoltClock Feb 03 '18 at 14:12
  • @BoltClock I guess because "everyone" uses CSS preprocessors without checking whether they could use CSS Custom Properties if their site doesn't need to target IE users (Edge supports them) :-) – Dave Everitt Feb 03 '18 at 16:26
  • 1
    Went a bit down the rabbit-hole with this one and threw up a [repo with examples](https://daveeveritt.github.io/css-custom-properties/) – Dave Everitt Feb 03 '18 at 16:32
  • 1
    @Dave Everitt: Those are unironically some of the nicest pastels I've seen, contrast notwithstanding (then again, I *am* partial to green and lavender). This *is* getting quite off-topic though, seeing as the question was about custom props in selectors to begin with. Check out [some](https://stackoverflow.com/search?q=user%3A106224+%5Bcss-variables%5D) of my [other](https://stackoverflow.com/search?q=user%3A106224+%22custom+properties%22) answers exploring areas where custom props *do* shine! – BoltClock Feb 03 '18 at 16:41
  • 1
    @BoltClock LOL thanks for the compliment on my colours! But yes, I got a bit carried away there... BTW nice answers :-) – Dave Everitt Feb 03 '18 at 21:03
  • 1
    Just thought I'd pop in... it's been about 8 years now - I also have no idea what the other commenter was on about, or when or why preprocessors even entered the conversation. – Tigerrrrr May 29 '22 at 21:48