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

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

 
countable
 
non countable
 
 countable

should work.. (the

1. could just become a div with appropriate styling..)

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