Learning Cascading Style Sheets (CSS) is not always that easy, but it can be fun and rewarding at times. For a couple of weeks now, I have been struggling with a problem concerning the use of nested lists together with the list-images. An intellectual problem (kinda) demanding intense concentration and perserverence (yeah sure).
What I wanted to do was have nested lists with a different bulleted image depending on how deep the given list was located. Say a red square, followed by a blue square, followed by a yellow square, and so forth. For the sake of simplicity, and avoiding my never-ending tendency to go into repetitive cycles into nested infinities, stop after three levels deep. Okay. Until now, due mainly to my ignorance of CSS, I had clumsily implemented complicated tables, cells and images with offsets and awkward justifications. If you know what I mean.
Hmmm, there must be a better way, I always thought.
And there was! This could be done by using the so-called child relationships defined in CSS. How? Well look at the following code example which needs to be placed within the style-tags:
OL LI { list-style-image : none; }
UL LI, LI { list-style-image : url(.../image_1.gif); }
UL UL LI { list-style-image : url(.../image_2gif); }
UL UL UL LI { list-style-image : url(.../image_3.gif); }
This results in the given desired effect. At long last. Is this an amazing discovery or what?! The very first line is required in order to retain numbering in ordered lists. And this is the result:
I am pretty pleased with this, and it makes my life as a future famous web designer alot easier. I suggest you have a look at my site map for an example of this nice use of nested lists.
