:nth-child Selector

[risingtalenttv]

Hey guys, I am currently using this css code to style a widget:

								#main .right .col ul.popular li {							width:156px;							height:39px;							background:url(images/popular.gif) no-repeat;							list-style:none;							font-size:9px;							color:#979797;							padding:10px;								}								#main .right .col ul.popular li a {									font-size:11px;									color:#cdcdcd;									text-decoration:none;									font-weight:bold;										}																		#main .right .col ul.popular li:nth-child(even) {									background:none;										}										#main .right .col ul.popular li:nth-child(even) a {											color:#575757;												}

The problem is that I just realized it doesnt work in IE. So I was reading up and I saw something suggesting that you can use JQuery instead for the same result (with cross-browser compatibility.) The only issue, is that I am still pretty novice and I don't quite get what im reading here: http://css-tricks.com/forums/viewtopic.php?f=5&t=7106Can anyone please shed some light for me?

[chibineku]

jQuery selectors are extremely similar to CSS ones, so to get the effect you want with this:

#main .right .col ul.popular li:nth-child(even) {									background:none;										}

You would use this jQuery:

$('#main .right .col ul.popular li:nth-child(even)').css('background', 'none');

However, you need to first include the jQuery library. So DL it from jquery.com and the whole thing would look like:

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="style.js"></script>

style.js is what I imaged you'd call the javascript involved in setting styles. You can call it whatever you like.Bear in mind always that people can turn JavaScript off, so I would always try to come up with a CSS only or server side fix.

[jeffman]

The way that works in all circumstances is to use a class like '.even' to style the correct elements. It is a pain to assign such classes by hand, and difficult to maintain. It is fairly easy if your list is being generated by PHP or something similar on your server.

[risingtalenttv]

jQuery selectors are extremely similar to CSS ones, so to get the effect you want with this:

#main .right .col ul.popular li:nth-child(even) {									background:none;										}

You would use this jQuery:

$('#main .right .col ul.popular li:nth-child(even)').css('background', 'none');

However, you need to first include the jQuery library. So DL it from jquery.com and the whole thing would look like:

<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="style.js"></script>

style.js is what I imaged you'd call the javascript involved in setting styles. You can call it whatever you like.Bear in mind always that people can turn JavaScript off, so I would always try to come up with a CSS only or server side fix.

I thought I grasped what you stated, but it doesnt seem to be working :/ I added this to my header (as well as uploaded the associated Jquery lib file)

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.4.2.js"></script><script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/style.js"></script>

and put this in the style.js file:

// JavaScript Document$('#main .right .col ul.popular li:nth-child(even)').css('background', 'none');$('#main .right .col ul.popular li:nth-child(even) a').css('color', '#575757');

Shouldn't it call to this based on the same ul class properties that css does, or am I missing something?

[chibineku]

Oh, my bad.The JavaScript will run before the elements you're trying to style are even in the DOM yet.You need to wrap the two jQuery lines in:

$(document).ready(function() {//the lines you have go here});

[risingtalenttv]

Oh, my bad.The JavaScript will run before the elements you're trying to style are even in the DOM yet.You need to wrap the two jQuery lines in:

$(document).ready(function() {//the lines you have go here});

Sweet! Thanks, I got it working. But I did notice after a little trial and error that for some reason I couldnt replace my existing:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

with

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery-1.4.2.js"></script>

All of my JS features only work with both active... Arent they the same thing? Ones just a newer library?

[chibineku]

The one with .min in the extension is the `minified` version. As the name suggests, it is a pared back version of jQuery. Perhaps there are some things missing from it that you're trying to use. I've only ever used the full 1.3.2 version, so I'm not au fait with the differences.

[Synook]

The minified version has only, well, been minified - all the code should be retained from the expanded version. However, the versions are different, so maybe there are some features that weren't implemented previously.