Posted on November 8, 2008 - by admin

CSS for jQuery Selectors - It really is just CSS

Last week we took a look at the jQuery selector syntax in our tutorial, which allows us to select elements by their ID, class name or tag name.

While it is pretty cool that you can select by class name, that really doesn’t buy us a whole lot.  But, you can do a whole lot more by using CSS style syntax.

For example, maybe you want to style all of the li elements that are under a particular ID to look a specific way.  You could use the selector statement:

$("#MyId li")

and if you wanted to make sure it only selected the top level items, you could use:

$("#MyId > li")

If you know your CSS, you know this means only apply this to li items that are direct children of the element with the ID of MyId.

So, you can see how easy this is to apply with a simple knowledge of CSS.  But, jQuery gives us a few operators that we can use as well.

For example, you can use :not to say, “if it is already styled with a specific class, just ignore it:”

$("#MyId > li:not(.myClass)")

There are some other operators that we can apply as well, including: eq, nth-child, odd, even and contains, which we will look at in a future installment.

I know we haven’t looked at how to actually apply the class to the selected elements.  Trust me we’ll get to it and it is VERY easy.

But, imagine how much easier it will be to apply complex styling to your ASP.NET site when you can apply the CSS after the page has been rendered, via jQuery, instead of as the page is being rendered on the server.