Styling alphabetical lists (ol type="a") using selectors

February 17, 2008

I was recently asked how to apply a style to an alphabetical ordered list, you can do this by using CSS selectors which are supported in IE7 and Firefox 2. Normally you would be able to add the class directly to the <ol>, but in this case, they were using a CMS system which generated the following HTML code:

<ol type="a">
	<li>item a</li>
	<li>item b</li>
</ol>

To style the list with CSS, just add the following to your stylesheet:

ol[type="a"] { color:red; list-style-type:lower-alpha; }

Older browser that don’t support CSS selectors, can be made to apply the same style using jQuery.

<script type="text/javascript">
<!-- <![CDATA[
$(function(){
	$('ol[type="a"]').addClass('lower-alpha');
});
// ]]> -->
</script>

You then need to update you CSS to add:

ol[type="a"], .lower-alpha { color:red; list-style-type:lower-alpha; }

So, now with or without javascript enabled IE7 and Firefox 2 will show the correct style. Older browsers that have javascript enabled will also show the correct style.

1 comment

  1. Thanks very much for posting this. I looked all over the web for CSS instructions for styling <ol type="a"> It was great to see it finally work!

    Comment by Maria – July 17, 2008

Leave a comment

If you found this post useful, interesting or just plain wrong, let me know - I like feedback :)

Please note: If you haven't commented before, then your comments will be moderated before they are displayed.