Thursday, May 24, 2007

Browser-Specific selectors (CSS)

These selectors are very useful when you want to change a style in one browser but not the others.

IE 6 and below

* html {}

IE 7 and below

*:first-child+html {} * html {}

IE 7 only

*:first-child+html {}

IE 7 and modern browsers only

html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

Recent Opera versions 9 and below

html:first-child {}


html[xmlns*=""] body:last-child {}

To use these selectors, place the code in front of the style. E.g.:

#content-box {
width: 300px;
height: 150px;

* html #content-box {
width: 250px;
} /* overrides the above style and changes the width to 250px in IE 6 and below */


a7la babe said...


Denis Hoctor said...

Bloody great! I knew these existed and have even used some before but couldn't for the life of me find a nice list of them. Instead people push js options! Cheers