html / css conditional styling in submenu

I've got a menu-structure generated by an webapplication. The output is as below, and as you can see below开发者_运维技巧 the menu goes three levels deep.

<ul id="mainMenu" class="nav">
    <li>
        <a class="firstitem " href="/products.aspx">Products</a>
        <ul id="firstLevel">
            <li>
                <a class="firstitem " href="/products/category-1.aspx">Category 1</a>
                <ul id="secondLevel">
                    <li>
                        <a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.-->
                        <ul id="thirdLevel">
                            <li>
                                <a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        <ul>
    </li>
</ul>

Most menus will be generated as above, but also the one below (without the third level) is an option.

<ul id="mainMenu" class="nav">
    <li>
        <a class="firstitem " href="/products.aspx">Products</a>
        <ul id="firstLevel">
            <li>
                <a class="firstitem " href="/products/category-1.aspx">Category 1</a>
                <ul id="secondLevel">
                    <li>
                        <a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a>
                    </li>
                </ul>
            </li>
        <ul>
    </li>
</ul>

What I want to achieve is that if there is an third level menu I want the text of hyperlink on the second level to be bold. How can I do this? Preferrably with css, otherwise with javascript/jQuery.

I've made a jsFiddle for you: http://jsfiddle.net/danAR/

jQuery code:

$(function() {
    $('ul#secondLevel li').each( function(index, item) {
        $(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0) );
    });
});

CSS:

a.aBold {
    font-weight:bold;
}

I can't see any easy way of doing this in CSS as your styling is based on a condition. If you using jQuery you could do along the lines of:

  var $third = $('#thirdLevel');
  if ($third.length)
  {
      $third.closest('a').css('font-weight', 'bold');
  }