CSS Hacks Using Browser Specific Selectors
Posted on:  Sep 30, 2008

Earlier, the main problem with the CSS has been lack of browser support. 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 recognize.

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. Browser detection using CSS hacks works by sending one CSS rule to the browser you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command.

 If you have two CSS rules with identical selectors then the second CSS rule will always take precedence. 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 {}


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

   AddThis Feed Button
Reader's Comments
 Aug 17, 2009 at 13:26 PM
Well I write different css codes for different browsers...Though it consumes a lot of time I find it hack free Thanks
Post your comment
(*) marked fields are mandatory
Email Address:*
Website/Blog URL:

Security Code:*
Note: Comment Moderation has been enabled. Kindly bear with us till the blog administrator approves them to be published.
Follow us on Facebook Follow us on TwitterRSS Feed LinkedIn
 Recent Posts
Need for Channel Sales and Distribution Management System
Growing demand for Secondary Sales Trend Analysis amongst FMCG and similar companies
How well are you Leveraging Technology for Collaborating with Your Distribution Partners?
AddThis Feed Button
Zed-Axis BlogSubscribe to Zed-Axis Newsletter
 Take our opinion Poll
 Media Updates
 Press Releases
February 2018
January 2018
December 2017
November 2017
October 2017
September 2017
August 2017
July 2017
June 2017
May 2017
April 2017