Conditional CSS Comments

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

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