Question

I have a multi stepped navigation and I want to apply cufon to only the top level.

So it goes like this:

<ul>
     <li>
         <a href="#"> CUFON ME </a>
         <ul><li>sub nav, dont cufont me</li></ul>
     </li>
</ul>

Right now its selecting all the child elements, I just want the top level one to be selected.

Cufon.set('fontFamily', 'Museo Sans 500').replace('h1')('h2')('h3')('.menu-header ul#menu-main-nav li a');

Answer 1

Not sure about the cufon syntax, but try

Cufon.set('fontFamily', 'Museo Sans 500').replace('h1')('h2')('h3')('.menu-header ul#menu-main-nav > li > a');

(though the .menu-header descentant selection is useless because the #menu-main-nav is an ID selector – or are there multiple elements with the same ID?)

This uses the > child selector to make sure cufon is only applied to the first descentant, also called child.