Line Numbers every nth Line with CSS Counters?

Question

I had to cut out certain referring links (italicized) as I don\'t have enough reputation yet, but can perhaps replace them later.

I\'ve created a jQuery plug-in that

Answer 1

For problem 2, if the class="fallback" in your fiddle is there to stay, and not just part of the explanation of the problem, you can use that as the solution: dispense with the nth-child(5n) and use the fallback as an indicator if the line count should show or not.

See updated jsFiddle.
I inserted a line in there that's not part of the poem, to see if it works, and it does: you can remove the line and the rest will remain synchronised.

Answer 2

Fixing the counting is not a problem as you can use counter-increment: line 0; for rules you want to be excluded (if they apply on the same element as the +1 increment) with a higher specificity or !important.

(if like in your case where you apply the rule to the :before pseudo-element, but want to exclude based on the li you can apply a counter-increment:line -1;

Demo at http://jsfiddle.net/gaby/qpsGv/3/

---

To display it on the right line though that is another issue as that has to do with the nth-child selector which does not allow for modifications... (if it finds a child it gets counted for its purposes..)

---

Update

I do not know what flexibility you have which changing the actual html, but the only solution i can see is to wrap the elements you want to not be counted in another element.

That way you can use the nth-of-type instead of the nth-child, so that you can indeed show only on multiples of 5.

In order to keep the html valid, you would need to use the menu element as that is the only one that allows both li and ol as children.. (you could ofcourse use entirely different elements .. just make sure that the counting elements are different that the non-counting ones)

So just counting on

menu.verse > li { counter-increment: line 1;}

and displaying on

menu.verse > li:nth-of-type(5n):before {
    content: counter(line);
    width: 2em;
    display: block;
    float: left;
    margin-left: -2em;  
}

when the html is

<menu class="verse">
 <li>countable</li>
 <ol><li>non countable</li></ol>
 <li> countable</li>
</menu>

should work.. (the <ol><li> could just become a div with appropriate styling..)

Demo at http://jsfiddle.net/gaby/qpsGv/7/