Unordered list replace bullet by image according to level, if last level text as link

Good day to you all,
I was wondering if there is a way to change the the look of wach level of a list.

Ex:

Last level, text = link
1st level, has 1 image instead of bullet and text in bold
2nd level as another image as bullet and text in bold
3rd level, if not last level, as another image as bullet and text in bold\

Here is where I’m now :



<html>
<head>
<style type="text/css">
ul {
      list-style-image: url(Icons/open_book_icon.jpg);
}

li {
      list-style-image: url(Icons/box_icon.png);
}


</style>
</head>
<body>



<?PHP
function globDir($dir)
{
   $files = glob("$dir/*", GLOB_ONLYDIR);
   
	 if(!empty($files))
   {
      echo "<ul>\
";

      foreach($files as $file)
      {
         echo "<li><b>". basename($file)."</b>\
";
         globDir($file);
         echo "</li>\
";
      }
      echo "</ul>\
";
   }
}
globDir('Photos');
?>

</body>
</html>

Thanks !

Good Question Peuplarchie.

You will need to take advantage of CSS classes.
See my example below, hopefully it gets you started!


<ul class="one">
            <li>Test One</li>
            <li>Test Two</li>
            <li>Test Three
                <ul class="two">
                    <li>Test Four</li>
                    <li>Test Five</li>
                </ul>
            </li>
</ul>


    ul.one{
        font-weight:bold;
    }
    
    ul.two li{
        color:#FF0000;
        font-weight:normal;
    }

The first unordered list is ‘bold’, whereas the second will be ‘red’ in colour.
To change the actual bullet point try experimenting with the list-style-image CSS property.

All the best!