jQuery Selectors – Looks just like CSS

187629_5335 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 post in jQuery

Related Post

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

  • 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.

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear