Every so often I come across a deep-level list that needs to be put into an HTML document. You can make yourself nuts with tons of classes, ID’s and the like, but found that by creating classes for the styles you need, you can save yourself a lot of time.
Thus, for each list-style: that I need, I create a CSS class:
.olDecimal li {list-style: decimal;}
.olAlpha li {list-style: lower-alpha;}
.olRoman li {list-style: lower-roman;}
These three classes will make my <UL> or <OL> with a decimal, lowercase alpha, or lowercase roman list-style: . Now I simply assign the class I want to the list in question, and I’m done.
This setup is particularly useful for a list like the following:
- Bread Aisle
- white bread
- wheat bread
- Meat and Fish Aisle
- Chicken
- Beef
- Hamburgers
- Steak
- Tuna Fish
Getting the “Hamburgers” and “Steak” entires to have a lowercase roman text style can get a little tricky — especially on deeper and larger lists. So by assigning the .olRoman class, to the <ul> under the Beef section, you can easily make this change. Using this method you can easily get the list-style formatting you want. And to get even more precise, you can make the white and wheat breads (as well as Chicken, Beef and Tuna Fish) with lowercase alpha text (a., b.) by assigning the class .olAlpha to the <ul> below the Bread Aisle <li>. Remember, the classes should be assigned to the <UL> that proceeds the <li>’s in question.
We’ll that’s my solution, I hope it helps you out.