Can I style content:counter based on counter value?

Question

I am using CSS2.1 counters to apply numbers to men on the board in the implementation of a board game whose board diagrams use HTML and CSS, by doing something like:

.ply  {counter-increment:main;}
.move:before {content:counter(main);}

With HTML structured as

<ply>
  <move...>
  <ply>
    <move...>
  </ply>
</ply>

All this works fine, but I would like to conditionally style the counter value differently if it's two digits in length (squeeze the two digits together with a negative letter-spacing, for example). Any ideas about how to do this or workarounds?

Answer 1

It turns out that we can retrieve the value of the counter in question with getComputedStyle, using the second argument which specifies the pseudo-element for which the counter was specified as the content:

value = window.getComputedStyle(elt, ':before').content;

Then we can apply a style such as

if (value>=100) { elt.style.letterSpacing = "-2px"; }

Which is what we want, although it requires traversing all the potentially affected elements with JS whenever they might have changed.

Answer 2

You can't do this using only CSS as there is nothing in css selectors about the size of the content.

That could be an anwser but if you want a workaround, it's possible using javascript.

Here's an example (using jquery) in which I change the color of the text when it's more than 2 chars long :

$('.move').each(function(){
    if ($(this).text().length>2) $(this).css({color:'red'});
});​

Demonstration : http://jsfiddle.net/dystroy/nKVvG/

Answer 3

I know it's not really what you wanted, but I made some research and couldn't find any css only way to do this, basically because as stated by @dystroy

"You can't do this using only CSS as there is nothing in css selectors about the size of the content."

So there's no way for the css to know how long is the content in the :before part.

So I guess you should really use jQuery a bit. Try this jsfiddle.

Basically what you can do is iterate over the elements you're indexing with the css counter and then use the .index() attribute to see wheter their counter is double or triple digit. Remember .index() starts from 0 when the counter starts from 1, so in the double digit condition check you should put

if($(this).index() > 8) ...

because counter = index + 1 -> if(counter > 9) = if(index > 8)

If the counter is double digit then you add a class to your movie element so you can freely style it in your css.

Answer 4

I think what you are looking for is discussed in this post: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery. I don't think you can do this via plain css, but I may be mistaken.