WordPress.org

1. pezastic
   Member
   Posted 7 years ago #

   In the list generated by <?php wp_list_cats(); ?> I would like to style each category level differently. Let's say WP generates this:
   
<ul>
<li><a href="url/category/grandparent/">Grandparent</a>
<ul class='children'>
<li><a href="url/category/grandparent/parent/">Parent</a>
<ul class='children'>
<li><a href="url/category/grandparent/parent/child/">Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>

   How do I style the grandparent, parent, and child category links differently?

   Currently, I have them wrapped in a "vnav" div and referenced in my stylesheet like this:
   
.vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active {
}

   .vnav ul li ul li a, .vnav ul li ul li a:link, .vnav ul li ul li a:visited, .vnav ul li ul li a:active {
   }

   .vnav ul li ul li ul li a, .vnav ul li ul li ul li a:link, .vnav ul li ul li ul li a:visited, .vnav ul li ul li ul li a:active {
   }

   .vnav ul li a:hover, .vnav ul li ul li a:hover, .vnav ul li ul li ul li a:hover {
}

   Now, that works, but there's got to be a better way to do that.

   Anyone?

2. Lorelle
   Member
   Posted 7 years ago #

   That's pretty much it, as far as I can tell. Check out the Codex page on styling CSS lists in WordPress to see the interesting example of the WordPress nested list and how to stylize it.

Topic Closed

This topic has been closed to new replies.