28

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
  • 96,640
  • 56
  • 199
  • 270
koningdavid
  • 7,903
  • 7
  • 35
  • 46

1 Answers1

30

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
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 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
  • 2
    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
  • @Tigerrrrr @BoltClock well, pretty simple as to why. CSS preprocessors *do* let you use variables in the selectors, which mitigates one of the worst design problems with CSS. Since the spec is not likely to get parent selectors any time soon, the committee went ahead and made sure there was also no way to use `is()` or `where()` half as effectively as they should be with variadic selectors. Since preprocessors can and CSS can't, it is natural that some will make that logic jump. Could easily just say selector vars must be attached to `:root`. pfft – That Realty Programmer Guy Aug 18 '22 at 09:35