.NET Answers

Last week we took a look at the jQuery selector syntax, 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.

Other Related Items:

Every Extend ExtraEvery Extended Extra is a unique arcade-style puzzle experience! When your ship enters a colorful vortex, you're sucked into the action as you take on... Read More >

Bwd Automotive CSS123 Engine Crankshaft Position Sensor

Selector 100 BlackPRODUCT FEATURES:Stores up to 100 discsPatented, one-touch disc retrieval systemDisc index slides and hidesGreat for archiving CD and DVD collections

Related Post

• jQuery – class manipulation
• jQuery Looks like XPath
• jQuery Simple Selectors
• jQuery – The Man, The Myth, The Legend
• jQuery 1.4 Released

Bookmark to:

Hide Sites

2 Responses to “jQuery Selectors – Looks just like CSS”