conditional CSS comments allow you to use different stylesheets to different browser. So you can assign different styles for different browsers.

To add browser specific styles you can use conditional css comments. Using which you can target each browser separately.

Importance of Using Conditional CSS

  • Target CSS to any web-browser.
  • Optimise your CSS.
  • You can separate CSS for different browsers.
/*CSS FOR ONLY IE*/
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->

/*CSS FOR ONLY IE 5*/
<!–-[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]–->

/*CSS FOR ONLY IE 5.0*/
<!-–[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]–->

/*CSS FOR ONLY IE 5.5*/
<!–-[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]–->

/*CSS FOR ONLY IE 6*/
<!-–[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]–->

/*CSS FOR ONLY IE 7*/
<!–-[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]–->

/*CSS FOR Greater than IE 5*/
<!–-[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]–->
/*CSS FOR Less than IE 6*/
<!–-[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]–->

/*CSS FOR Less than equal to IE 5.5*/
<!–-[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]–->
/*CSS FOR Greater than IE 6*/
<!–-[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]–->

If you want to use Different Styles for different browsers in your CSS files or within the style tag

For IE6

*html .your_class
	{
	/* Your Style*/
	}
/* FOR ID*/

*html #your_ID
	{
	/* Your Style*/
	}

For IE7

*+html .yourclass
{
	/* Your Style*/
}
/* FOR ID*/
*+html #your_ID
{
	/* Your Style*/
}

For Google Chrome, opera, safari

body:nth-of-type(1) .your_class
{
/* Your Style*/
}
/*For ID*/

body:nth-of-type(1) #your_ID
{
/* Your Style*/
}