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
April 2017
March 2017
February 2017
January 2017
December 2016
November 2016
October 2016
September 2016
August 2016
July 2016
June 2016