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 {}

Safari

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 */