How to Read the Applied CSS-Counter Value

How can I read the applied CSS-counter value?

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.

Can I get the CSS counter value of the parent?

You use two different counters: one for the li parents and one for the li subitems. Then, in each li subitem, concatenate multiple counter() functions using each counter, like this:

ol {
    counter-reset: item;
}

ol ol {
    counter-reset: subitem;
}

li {
    display: block;
}

/* First level of parent items */
li:before {
    content: counter(item, decimal-leading-zero) ' ';
    counter-increment: item;
}

/* Second level of subitems */
li li:before {
    /* counter(item) for the parents, counter(subitem) for the subitems */
    content: counter(item, decimal-leading-zero) counter(subitem, lower-alpha) ' ';
    counter-increment: subitem;
}

jsFiddle demo, tested in all browsers that support :before and CSS2.1 counters including IE8+

Useful reading: W3C CSS2.1 generated content spec, §12.4.1 Nested counters and scope

CSS - Use counter() number as property's value

It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.

"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source

CSS counter not incrementing

The problem is the repeated definition of the counter-increment property:

body {
  counter-reset: firstCounter;
  counter-reset: secondCounter;
}

The second definition overrides the first; to increment multiple counters you simply have to use a white-space separated list of those counters:

body {
  counter-reset: firstCounter secondCounter;
}

Name: counter-increment

Value: [ ? ]+ | none

<custom-ident> <integer>?

The element alters the value of one or more counters on it. If there is not currently a counter of the given name on the element, the element creates a new counter of the given name with a starting value of 0 (though it may then immediately set or increment that value to something different).

body {  counter-reset: firstCounter secondCounter;}
h2.heading::before {  counter-increment: firstCounter;  content: counter(firstCounter)"\00a0";}
h3.issue::before {  counter-increment: secondCounter;  content: counter(secondCounter)"\00a0";}
/* irrelevant, just for the sake of easier visuals in the answer: */
h2 {  border-top: 2px solid #aaa;}
h3 {  margin-left: 2em;}

<h1>The Book</h1>
<h2 class="heading">First Heading</h2><h3 class="issue">The Issue of Drinking</h3><h3 class="issue">The Issue of Drinking Too Much</h3>
<h2 class="heading">Second Heading</h2><h3 class="issue">The Issue of Driving</h3><h3 class="issue">The Issue of Drunk Driving</h3>

Skipping items with CSS counters

here's something that works: http://jsfiddle.net/8PKjj/1/

ol {
    counter-reset: item 23;
    list-style: none;
}
li {
    position: relative;
}
li:before {
    counter-increment: item;
    content: counter(item, upper-alpha) '.';
    position: absolute;
    left: -2em;
}
li.big-jump:before {
    counter-increment: item 27;
}

It's not the prettiest thing, but it's a place to start.

Using css counters to generate ordinal values?

It will be easy if you have to add th on every number. But in this case you will need to change the 1st, 2nd, 3rd, 21st, 22nd, 23rd, 31st, 32nd, etc...

So you will need to use nth child concept here. Use :nth-child to target the element.

You will also need to use :not selector to not change the 11th, 12th, 13th element

body {  margin: 0;  font: 13px Verdana;}
ul {  margin: 0;  padding: 0;  list-style: none;  counter-reset: item;}
ul li {  margin-bottom: 5px;  position: relative;}
ul li:before {  counter-increment: item;  content: counter(item)"th. ";  color: red;  font-weight: bold;}
ul li:nth-child(10n+1):not(:nth-child(11)):before {  content: counter(item)"st. ";}
ul li:nth-child(10n+2):not(:nth-child(12)):before {  content: counter(item)"nd. ";}
ul li:nth-child(10n+3):not(:nth-child(13)):before {  content: counter(item)"rd. ";}

<ul>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li>  <li>listItem</li></ul>

---

Related Topics