Folder Tree

While reading Styling Nested Lists from SimpleBits, a comment from Rahul jogged my memory of a nested list styled in the fashion of Windows Explorer that I had thought about.

Unstyled

It is a nested list of links. The list are simple with the only class being on the root list.

First

The first version uses a dotted background image on the <li>s to create the connection. But on the last <li> it keeps going on the side.

CSS

ul.explorer1{ padding: 5px; background-color: White; margin: 0; } ul.explorer1 ul{ padding: 0; margin: 0 0 0 10px; } ul.explorer1 li a{ font-family: Arial; text-decoration: none; color: black; } ul.explorer1 li a:hover{ color: blue; } ul.explorer1 li{ list-style: none; background-image: url("graphics/dotted.gif"); background-repeat: repeat-y; padding: 2px 0 2px 20px; text-indent: -19px; background-position: 9px 0; } ul.explorer1 li::before{ content: url("graphics/bullete.gif") " "; }

Second

I want the dotted line to stop on the last one and not continue down. Since I want to stop the background from repeating on the last <li> in a list, I use the puesdo-class :last-child to directly target it for styling.

}

CSS

… ul.explorer2 li{ list-style: none; background-image: url("graphics/dotted.gif"); background-repeat: repeat-y; padding: 2px 0 2px 20px; text-indent: -19px; background-position: 9px 0; } ul.explorer2 li:last-child{ background-repeat: no-repeat; }

Third

Now I want to add folder next to the links that have children and page icons next to those that have no children. The links that are will have the page icon have no siblings. The links with the folder icon will have a sibling that is the nest list (<ul>). So I will style the links by default to have a folder icon and then to style those that have no sibling I will use :only-child.

CSS

ul.explorer3 li a::before{ content: url("graphics/folder.gif") " "; } ul.explorer3 li a:only-child::before{ content: url("graphics/page.gif") " "; }

Fourth

The example above does not work as of today (October 20, 2003) in Mozilla. The links that have should have the folder icon have a <ul> as there next sibling. While those that should have a page icon, they have no next sibling. So instead of using :only-child, I can use :last-child

CSS

ul.explorer4 li a::before{ content: url("graphics/folder.gif") " "; } ul.explorer4 li a:last-child::before{ content: url("graphics/page.gif") " "; }

Return to CSS Play.