Add another CSS Style to Child Elements which are also Parents

Question

So my list looks something like this:

<div="list">
  <ul>
    <li class="page item">Parent 1
      <ul>
        <li class="page item">Child of Parent 1 and Parent of Grandchild
          <ul>
            <li class="page item">Grandchild</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

This is through Wordpress' list_wp_pages along with a custom CSS suckerfish-like dropdown CSS code. Nothing can be changed in the unordered list itself, so I need to find a way to add a CSS style to only child pages that are also parents (Child of a Parent 1...).

I've been trying to add an arrow icon only to child pages that have child pages of their own. I figured that I could use:

$("#target").addClass("newclass");

to add an extra class with an arrow icon as a background image.

Thanks!

Answer 1

$("#target li").each(function() {
    if ( $("ul:eq(0)", this).length > 0 ) {
     $(this).addClass("class_name");
    }
});

Checks every list item under #target to see if it has at least one child unordered list, and if it does, then it adds a class name to the list item it just checked.

Answer 2

Hey, that's awesome! Is this theme-specific? And where exactly does this go? Do we just check through the header files or sidebar php code?