Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

Aprile 20, 2016

Suppose you have two ordered list ol tags, and the second one has a start attribute.
You also have in css a style on li:before to style the number:

ol li:before {
	content: counter(item);
 }

If in the HTML you have two separate ol tags and the second with “start” attribute, it will not work, because content: counter(item) will start from 1 again.

To fix it you can use this javascript trick using jQuery to add apply start to the :before pseudo class element:

$('ol').each(function(){
	if($(this).attr("start")) {
		var $q = parseInt( $(this).attr("start") );
		if($q>0) $q--;
		$(this).find("li:first").each(function(){
			$(this).css("counter-reset","item " + $q);
		});
	}
});

Author

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

Recommended

Scroll to DIV by ID without jQuery

Use scrollIntoView instead of jQuery animate.

Dicembre 16, 2022

How to write a text description into html input type password

Sometime designers put form labels and instrucions into html inputs. One of the common uses is for login boxes when…

Marzo 10, 2010

Mini gallery/slideshow with PHP and JQuery

Sometimes I’ve had to quickly put in a page a simple slideshow, the first times I’ve searched a lot around…

Dicembre 13, 2009

Set “write here” on input type text?

If you are using JQuery framework and you want to set up the default value of some text box in…

Novembre 17, 2009

Javascript to make some links blink

Mark each anchor tag (<a href…) with rel=”blinking” to make the tag blink (not very clever, but sometimes useful). This…

Novembre 9, 2009