jQuery Selectors – Looks just like CSS

You can also get the feed via email. Sign up now by supplying your email address and clicking the Subscribe button

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.

Like this Article? Subscribe to get every article sent to your email.

Related Post

jQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class. But what if we wanted to select a […]

jQuery Simple Selectors Last week we started looking at the jQuery selector by looking at the syntax we used to get our "hello world" demo working.Today, we'll start digging a little deeper into this main […]

jQuery – class manipulationSo, now that we've fully exhausted the topic of how to select elements using jQuery, what can we do with it?Well, one thing we can do is use the two built-in methods, addClass and […]

jQuery – The Man, The Myth, The LegendI admit it. I've been ignoring jQuery for quite a while. But I have a tendency to do that with most new things. I generally don't work with beta software and I wait for […]

jQuery – Explaining Last Week’s Code Last week I left you with a chunk of code that showed you that you had successfully installed jQuery into your web application.The code we need to discuss looks like […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

Thanks for the information, I didn’t realize this feature existed! It’s very cool! I wish that ‘:not’ operator was in CSS, that’s be way cool too. 8^)

I agree that applying CSS via JavaScript on the client is very useful, especially to someone like me who loves and breathes JS! But, I don’t understand the last part of your last sentence!?

“… instead of as the page is being rendered on the server.”

Did you mean ‘… on the client’? I only ask because I was wondering if there is another feature I’m missing of JQuery or some other cool plugin for IIS/Apache that I don’t know of.. No worries though! Thanks for the info!

Dave

If you are using server side scripting, you could do this in your server script by, for example, alternating the value of the class attribute as you are generating the html in your script.