CSS Hacks – Browser Specific Selectors

CSS Browser Selector gives us the ability to write specific CSS code for each operating system and each browser. To send different CSS rules to IE, we can use the child selector command, which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Here is the list of some useful browser specific selectors when we need 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 {}

Opera versions 9 and below

html:first-child {}

Safari

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

Place the code in front of the style to use these selectors.
For example:

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

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

One thought on “CSS Hacks – Browser Specific Selectors

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s