Child elements in a list using Cufon
I'm trying to use Cufon on the parent li tags on a list and just regular text on the sub level items. The problem is cufon is applying it's styl开发者_C百科e to all
I've tried .parent li a:not(.parent li ul li a) but it dosn't seem to work
Use the direct descendant css selector >. This will target only that element's direct children.
jQuery
$('.parent > ul > a')
css
.parent > ul > a {}
html
<ul class="parent">
<li>
<a>Cufon Here</a>
<ul>
<li><a>No Cufon Here</a></li>
</ul>
</li>
</ul>
More info about child selectors at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Found this solution and it seems to be working:
ul.parent > li > a
via http://groups.google.com/group/cufon/browse_thread/thread/06d09135431f6703
This goes to your <head> within a script tag. Make sure that your Cufon lib and the font file is present and added before your replace method.
<script src="assets/js/plugins/cufon-yui.js" type="text/javascript"></script>
<script src="assets/font/Futura_400.font.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/scripts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Cufon.replace('#mainnav > li > a, #sectionnav > li > a, h1',{fontFamily: 'Futura', hover: {color: '#58AD55'}});
</script>
This one will only select a which are child of li which are child of #mainnav. Only the first level will be replaced by cufon. The Hover Method let you define which hover color your replaced links will have.
Example above will work with following Html:
<ul id="mainnav">
<li><a href="#">Replaced by cufon</a>
<ul>
<li><a href="#">Plain Text</a></li>
<li><a href="#">Plain Text</a></li>
<li><a href="#">Plain Text</a></li>
</ul>
</li>
<li><a href="#">Replaced by cufon</a>
<ul>
<li><a href="#">Plain Text</a></li>
<li><a href="#">Plain Text</a></li>
<li><a href="#">Plain Text</a></li>
</ul>
</li>
</ul>
加载中,请稍侯......
精彩评论