How can I read the applied CSS-counter value?

Question

Say you have a CSS 2.1 counter like

ol { counter-reset: section; list-style-type: none; } li:before { counter-increment: section; content: counters(section, ".") " "; } <ol> <li>itemA</li> <!-- 1 --> <li>itemB <!-- 2 --> <ol> <li>itemC</li> <!-- 2.1 --> <li id="foo">itemD</li> <!-- 2.2 -->

(see https://developer.mozilla.org/en/CSS_Counters "nesting counters")

Is there a way to read/get the :before.content ("2.2" in this case) for <li id="foo"> in JavaScript?

Edit: In my case a Mozilla-only solution would suffice. But there really seems to be no way to access this information. At least I didn't find any at https://developer.mozilla.org/en/CSS_Counters ff.

I think you need to use javascript to achieve something like this. I don't think CSS has anything this smart in nesting counters. — Robert K
– Robert K, Commented Feb 10, 2009 at 13:33
yes, that's why it's tagged "javascript" ;-) Changed the sentence to "Is there a way to read/get... in JavaScript?" — VolkerK
– VolkerK, Commented Feb 10, 2009 at 13:49

bobince · Accepted Answer · 2009-02-10 13:04:38Z

None that I can think of, no. :before pseudo-elements are not part of the DOM so there is no way to address their content.

You could make a function that scanned the stylesheet's DOM for the :before rules and worked out which rules the browser had applied where, but it would be incredibly messy.

Gary Green · Accepted Answer · 2009-02-10 13:28:22Z

I thought about a workaround trying to get the .content value but even that doesn't work because its not been set. Thats really quite shocking. I don't think there actually is any easy way to get this value!

You could calculate it with some disgusting Javascript, but that would blow the whole point of this automatic css styling out the water.

David Hanak · Accepted Answer · 2009-02-10 18:10:28Z

I agree with the others: there is no way of doing that currently. Therefore I suggest you replace CSS-based counters with javascript based ones. It shouldn't be too difficult to write a script in jQuery to perform the same kind of labeling of list items, and then you know what values you inserted. Perhaps you could keep the CSS-based numbering as a fallback in case javascript is disabled in the browser.

sth · Accepted Answer · 2009-08-02 20:21:52Z

var x = document.getElementById("foo"); var y = document.defaultView.getComputedStyle(x, "::before").getPropertyValue( "counter-increment");

":before" works for backward compatibility if this doesn't, I don't know current support for "::before".

Clarification: : is pseudo-class & elements in CSS2.1, :: is pseudo-element in CSS3.

You'll probably have to parse out the number with parseInt.

Unfortunately getComputedStyle is a Standards function, which means MSIE does not support this, but FF, Chrome & Safari, and Opera do.

Sounds like this could be it. But unfortunately in my first quick-test y is "section 1" for all li elements in ff 3.0.x and firebug doesn't list another property in the ComputedCSSStyleDeclaration object that contains the actual counter value for the element. But 'content' contains "counters(section, ".") " "", so I assume it's the correct "element".
This will return CSS value of counter-increment property. That is not the current counter value on node, will be the same value for all nodes.

Collectives™ on Stack Overflow

How can I read the applied CSS-counter value?

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

2 Comments

Linked

Related