Differentiate Between Parent & Child Categories

Question

So I'm working with a non-wordpress theme called "Misty" and it uses this code to pull categories:

<li class="sidebox">
    <h3><?php _e('Categories','ml'); ?></h3>
    <ul id="catList">
        <?php
        if (function_exists('wp_list_categories'))
        {
            wp_list_categories("show_count=1&include=$catID&hierarchical=1&title_li=");
            wp_list_categories("show_count=1&child_of=$catID&hierarchical=1&title_li=");
        }
        else
        {
            wp_list_cats('optioncount=1');
        }
        ?>
    </ul>
</li>

What sucks is that I cant style parent / child categories different, I want to indent child categories but they all go by class=category ID

$catID is how I want to filter posts. 3 different domains are coming to this blog and I am taking where they came from and filtering posts that way. So far I've filtered the category and showed that categories sub-categories, but the subcategories have no way to be styled.

What's a good work around to style the child categories? Is there somewhere I can just add another class to the child LI's?

Answer 1

The child ul comes with the class "children", so you can use this to target your css.
ul.children li { }

Even without that, though, you could just use the hierarchy of lists to target..

ul#catList ul li { } would target any li within a ul, within the #catList ID.

Answer 2

You shouldn't have any problem making parent and child categories look different using CSS. Go to view source and you should see something like:

    <ul id="catList">

            <li class="cat-item cat-item-1"><a href="http://yourdomain.com/category/misc/" title="Miscellaneous and Unsorted Posts">Misc.</a> (1)
</li>
    <li class="cat-item cat-item-4"><a href="http://yourdomain.com/category/newsletter/" title="View all posts filed under Newsletters">Newsletters</a> (9)
<ul class='children'>
    <li class="cat-item cat-item-79"><a href="http://yourdomain.com/category/newsletter/test/" title="just a test. delete whenever.">test</a> (1)
</li>
</ul>
</li>

See where it says ul class="children" ? Make a default style for all category menu items and then override that with the "children" class (something like #catList ul.children li a {color: green} which would make all child category links green).

Hope that helps :)