Although 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)
|CSS3 Attribute Selectors||IE6 (no support),
|Child Selector||IE6 (no support)||$(“div>span”)|
|Adjacent Sibling Selector||IE6 (no support),
|General Sibling Selector (CSS3)||IE6 (no support),
|First Child pseudo-class||IE6 (no support),
Some Other Browsers (buggy)
If you want detailed information on what each selector is supposed to do, see the selector section in the SitePoint CSS Reference.