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

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.