What is: *:first-child+html .widget h3.handle.icon{

HTML & CSS
1

To remove an entire CSS file, I’m putting all the IE-specific styles into the main CSS file (there’s not that many).

So instead of:


<!--[if lt IE 9]> <link type="text/css" rel="stylesheet" href="http://static.domain.com/css/ie.css" /><![endif]-->

///I will use this:


<!--[if lt IE 9]>      <html class="ie"> <![endif]-->
<!--[if IE 9]><!--> <html>         <!--<![endif]-->

… so obviously I then do this:


.ie width: 50px; // instead of just width:50px

etc.

The question is: what do I do with this?


*:first-child+html .widget h3.handle.icon
2

Just put it in your regular style sheet. I can’t quite tell what it does, though. Was that in your IE style sheet? Most versions of IE wouldn’t understand that anyway.

3

Well the * selector selects all the elements present in the page & the + selector is a sibling.

So the final code would be

*:first-child+html.ie .widget h3.handle.icon

or

*:first-child+.ie .widget h3.handle.icon
4

Hi,

“*:first-child+html” is a convoluted IE7 hack and works on the same basis as the * html ie6 where IE imagines that html has a parent but it doesn’t.

If you want styles to apply to IE7 only then you would just use the rule as it is.

e.g.


*:first-child+html div{background:red}/* only ie7 is red */

However there is a much simpler hack for IE7 only and that is as follows:


*+html div{background:red}/* only IE7 gets this */

If you want to target IE6 only then use the old fashioned * html hack.


* html div{background:red}/* only IE6 gets this */

Of course you could just as well add each one into your CC’s classes on the html element and target whichever version of IE you need without using the hacks.

It is unlikely that the same hacks yo give to IE8 will be the same ones you give to IE7 unless you aren’t catering for ie7 and under of course.