CodeinWP CodeinWP

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery

Getting Buggy CSS Selectors to Work with jQueryAlthough the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.

Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

No surprise that the biggest selector problems occur in connection with IE6.

CSS Selector Incompatible Browser(s) jQuery/CSS Syntax
Chained classes IE6 (no support) $(“p.one.two.three”)
ID and class on the same element IE6 (buggy support) $(“#one.two”)
Attribute Selector IE6 (no support)
All Other Browsers (buggy)
$(“p[style]”)
CSS3 Attribute Selectors IE6 (no support),
IE7/8 (buggy)
$(“a[href^=’http:’]”)
$(“a[href$=’pdf’]”)
$(“div[style*=’border’]”)
Child Selector IE6 (no support) $(“div>span”)
Adjacent Sibling Selector IE6 (no support),
Safari (buggy)
$(“p+span”)
General Sibling Selector (CSS3) IE6 (no support),
IE7/8 (buggy)
$(“p~span”)
First Child pseudo-class IE6 (no support),
Some Other Browsers (buggy)
$(“li:first-child”)

If you want detailed information on what each selector is supposed to do, see the selector section in the SitePoint CSS Reference.

16 Responses

  1. Vadim says:

    Great, very useful.
    Yes we must stop supporting ie6.

  2. Fabian says:

    Danke für diesen nützlichen Artikel.

  3. Tom Something says:

    I sense a trend in this chart, like all of the problems are coming from one company…

    Anyway, I like this very much. I would only advise that, for essential styles, you rely on non-javascript methods. In particular, I give form elements a classname that matches the “type” attribute. Then I base the css on the classname, not the “type” attibute. For example,

    • Tom Something says:

      Okay, no angle brackets. Gotcha. Here’s my example again: <input type=”checkbox” class=”checkbox” />

      • That’s actually a very interesting idea. The only problem is that if you do that for all your elements, then it adds way too much clutter to your HTML.

        Also, there are some cases where you only want to target elements with user-created inline styles, so in that case, the element couldn’t have the class added to it.

  4. Fred says:

    That’s very smart. I knew this JQuery synthax but I had never thought of using it to make buggy selectors work on IE6 :)

  5. Jimba says:

    I like it, as well the comment rule too :)

  6. Alon says:

    what about Opacity ? when using $(div).css(‘opacity’,’0.5′), it works in all browsers and no need filter also, very important.

  7. Ant Gray says:

    I seen many people not using >, [attr] and multiple classes in jQuery, because they not using it in css, because ie6 does not support these css rules (though it works in jquery).

    • You’re absolutely right. Yesterday at work, I was talking to a developer who is MUCH better at JavaScript and jQuery than I am, and he had no idea you could use the direct child selector (>). This despite that he can run circles around me in any code/language (except HTML/CSS, of course).

  8. Renato says:

    Have any ideia of how make jQuery check browser, read css and get ‘unssuported’ rules and run “.css” on every rule inside {}

    At all, how to read css files? Will be very cool add an script on end of page to read all CSS files and fix all rules

    • That sounds like a very interesting solution, because it would keep your CSS in the stylesheet, where it belongs. Then, later, when the unsupporting browsers fall out of use, you could just delete the jQuery code, and everything would still work fine.

      I’m sure there are scripts available that accomplish something like this. Would definitely be worth looking into.

  9. magic_quote says:

    There is this mighty js library called ie-7.js :
    http://code.google.com/p/ie7-js/
    It gives both ie6, 7, 8 and future ie9 a normal modern web broswer rendering and support all these css features, even more !

  10. Christian says:

    I’m sorry, but I don’t see the advantage of using jQuery to fix web browsers’ CSS support that way.
    Well, you address specific items with jQuery which can not be achieved with pure CSS. Now what do you do next? Add inline CSS rules? Bad. Add a certain class to the item and attach rules to it in your CSS file? In that case you might as well attach this class to your item “by hand”, writing it in your HTML code.

    So what’s the use?

    • Christian,

      You’re right, it takes away a lot of practicality, and it forces you to put CSS in your JavaScript. But it’s just an option to consider.

      For example you could do something like this:

      $("div>span").css("width", "100px");
      

      So, while this sounds good in theory, you’re absolutely right, it’s not the most practical solution, and could cause more trouble than it’s worth.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).