How do I style a category list with child cats, each level styled differently

  • Christopher Stevens

    (@ultrus)


    15 years, 7 months ago

    Hello,
    The website I’m working on uses custom bulletted list, as seen at: http://christopherstevens.cc/fun/bulletsFromHell.html

    I need to apply a revised version of this set of styles to a category list in the WordPress sidebar. The list in the above link looks like this:

    <div id="list">
  <ul>
    <li>Level One</li>
    <li>Level One</li>
    <li>Level One</li>
    <li class="nestedList">
      <ul>
        <li>Level Two</li>
        <li>Level Two</li>
        <li>Level Two</li>
        <li class="nestedList">
          <ul>
            <li>Level Three</li>
            <li>Level Three</li>
            <li>Level Three</li>
            <li class="nestedList">
              <ul>
                <li>Level Four</li>
                <li>Level Four</li>
                <li>Level Four</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

    More specifically, can I add a class of “nestedList” to parent categories that have children, or is there a different class name available that I can use? Is there another solution that you would suggest instead? Can I set something in wp_list_categories() ?

    Thank you much for the feedback in advance! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • sososohu

    (@sososohu)

    15 years, 7 months ago

    ul too many. 🙁

    Lari

    (@lari)

    15 years, 7 months ago

    Why do you need the class? Can’t you use #list ul ul … in your css?

    motstudio

    (@motstudio)

    15 years, 7 months ago

    I think they need the separate nested lists class to style the appearance of the nested lists differently.

    If you style ul with:

    ul {
     list-style-type: disc;
}

    Then you’re going to get a list full of disc markers marking the beginning of each individual listed item.

    To get different looking markers, you’re going to need to style each child list/nested list to display differently.

    JonMeek

    (@jonmeek)

    15 years, 7 months ago

    You don’t really need the nestedList class. You can accomplish what you want with just one class. Then you just add each new ul in the CSS file like this:

    #list ul {
	list-style:none;
	font-weight:bold;
}
#list ul ul {
	color:#099;
	font-weight: normal;
}
#list ul ul ul {
	color:#909;
	font-weight:normal;
}
#list ul ul ul ul {
	color:#990;
	font-weight:normal;
}

    I have posted an example page: nestedlists.html

    Hope that helps.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I style a category list with child cats, each level styled differently’ is closed to new replies.