CSS - Use Counter() Number as Property's Value

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

Set margin (indent) based on counter value in CSS

For a Small Set

If you are dealing with a small set of section elements next to each other (as your sample shows), then using the adjacent sibling selector (or nth-of-type if only CSS3 support is desired) will get you what you want without counting. However, probably much more than about five elements and the css could get too cumbersome, so if you are looking at this for hundreds of elements, it is not practical.

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}

Using css counters how do I create a class that can have the initial value of the counter set?

You can supply an arbitrary starting value to counter-reset, but you'd need to do this with each pre element using its inline style attribute, and you'd need to supply a number 1 less than your desired starting line number:

pre { counter-reset: line; }code { counter-increment: line; }code::before { content: counter(line); float: left; margin: 0 1ch; }

<pre style="counter-reset: line 6"><code>Line of code</code></pre>

Pure CSS rotate by incrementing amount

Not sure if there is a way to do this considering sibling elements but if you are able to consider nested elements you simple need to do something like this:

.container div {  transform: rotate(10deg);  transform-origin:top left;  margin:10px;}

<div class="container">  <div>Thing 1  <div>Thing 2  <div>Thing 3</div>              </div>              </div></div>

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

How to use css counters in nested lists without parent index while not using a separate counter for each level

Looks funny, but you might use counter() not counters():

.list {
  counter-reset: section;
}

.item::before {
  counter-increment: section;
  content: counter(section) '. ';
}

.list .list .item {
  margin-left: 30px;
}

<div class='list'>
  <div class='item'>item</div>
  <div class='item'>item
    <div class='list'>
      <div class='item'>item</div>
      <div class='item'>item
        <div class='list'>
          <div class='item'>item</div>
          <div class='item'>item</div>
          <div class='item'>item </div>

        </div>
      </div>
      <div class='item'>item </div>

    </div>
  </div>
  <div class='item'>item</div>
  <div class='item'>item</div>
</div>

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.

---

Related Topics