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.

Colvert

I think you need to use javascript to achieve something like this. I don't think CSS has anything this smart in nesting counters. – Drucilladrucy

yes, that's why it's tagged "javascript" ;-) Changed the sentence to "Is there a way to read/get... in JavaScript?" – Colvert

Answer 1

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.

Foxhound

That seems to be the sad truth ...but I'm still hoping ;) – Colvert

Answer 2

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.

Herbage

Answer 3

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.

Kelci

possible, but not really an option in this case. – Colvert

Answer 4

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.

Conventionalize

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". – Colvert

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. – Limacine