Explanation of these CSS definitions: *:first-child+html

[AffiliateDreamer]

Hi,

Can someone explain what these CSS defintions mean?

*:first-child+html #nav ul li
{ padding-bottom: 5px; }

I'm not sure what the '*' means, or the : or the +

[coopster]

Here you go, see if the Selectors [w3.org] docs clarify things.

[swa66]

Feels very much like a hack. I'd stay clear of it.

html is your outermost element, talking about it in terms of a sibling can't be done equally in many browsers, on top of that, siblings themselves are already not supported by e.g. IE6

• * : any element used e.g. to reset padding and borders globally
  
• :first-child : only matches the first sibling in a parent, I've used it in
  
• + : sibling selector: matches the second one if immediately preceded by the first one

[londrum]

it's a hack for IE7. only IE7 will pay any attention to the rule.
a bit like

* html

, which we used for IE6.

it's quite handy though - i use it.

[swa66]

I will always use conditional comments instead of hacks to do specific stuff for the broken IE6 and IE7. Hacks come back and haunt you in the long term.

[Wlauzon]

This is a CSS hack for IE7 only, but I have yet to figure out the purpose of it, or what it does different.

For example, our Yahoo store default css used:

*:first-child+html #bodyshell { width:610px; }

But this seems to have the same effect and works also:

#bodycontent #messagearea {
border: 1px solid #FF00FF;
width: 90%;
margin: 0 auto;
font-family: Calibri, Arial, Helvetica, sans-serif;
font-size: 1.2em;
}

Since #messagearea is a descendant of #bodycontent.

I can only test this in IE7 and FF - am I missing something?

[bluesmandeluxe]

It is used in conjunction with the "clearfix" float auto-clearing method.

The clearfix method to auto clear floats uses the pseudo class ":after".

eg:

#navbar:after, #footer:after {

content: ".";
display: block;
height: 0;
margin:0;
padding:0;
clear: both;
visibility: hidden;
}

IE doesn't recognize the pseudo-element ":after", AND has a "HasLayout" issue with floated elements (the contents can exceed the dimensions of the floated container if no height or height:auto is designated).

So the IE6 hack was simply to give IE6 a "minimum" height of 1% (since the content would always be over 1% it forced IE to conform to the floated element's dimensions).

The hack to clear the float was:
* html #navbar, * html #navbar {height:1%}

Simple.

BUT! IE7 fixed the bug that allowed the old "star" hack, yet didn't fix the "HasLayout" float issues.

The brilliant solution to force IE7 to give the element a minimum height was the first-child pseudo element (which IE recognized) along with "min-height" (which it also now recognized) ... so to get IE7 to use a clearfix type auto-clear the hack is:

*:firstchild + html #navbar {min-height: 1px;}

Most pros use the cleafix method like so:

#navbar:after, #footer:after {
 content: "."; 
 display: block; 
 height: 0;
 margin:0;
 padding:0; 
 clear: both; 
 visibility: hidden;
}
/* fix for IE6 */
* html #navbar, * html #navbar {height:1%}
/* fix for IE7 */
*:firstchild + html #navbar {min-height: 1px;}

[bluesmandeluxe]

LOL, forgot to respond to the original sample:

*:first-child+html #nav ul li
{ padding-bottom: 5px; }

This :first-child pseudo-class matches the first child element of its parent element.

In the above example, first-child ONLY matches the first list item in #nav ul and gives it a 5px bottom padding. It doesn’t match anything else.

[Wlauzon]

Thanks for replying, I was wondering if my post had gotten lost :D

I still can't quite figure out what that hack does, or when (and when not) to use it.

For example:

*:first-child + html #bodyshell {
width: 86%;
border-left: solid 150px #FFF;
}
#bodyshell {
width: 86%;
border-left: solid 150px #AAA;
}

In that, IE7 shows up with a white border, Firefox with a grey border, so it is applying one color to IE7 and another to FF.

In other words, FF is picking up the ID without the "first child", but IE7 is not.

[edited by: Wlauzon at 6:20 pm (utc) on May 16, 2008]

[swa66]

Specificity comes into play in your IE7 case.

[Wlauzon]

I don't see how.

In order to get IE7 to change the border color, it has to be the *:first-child+html version. IE7 will not recognize just the #bodyshell.

Firefox is just the opposite, it has to be #bodyshell, the *:first-child+html #bodyshell does not work.

So in order to get the border color to show up in both IE7 and FF, I need 2 separate lines.

[swa66]

Just drop the hack unless you want different result in both IE7 and the rest of the browsers.

[pre]#bodyshell {
  width: 86%;
  border-left: solid 150px red;
}[/pre]

And if you want different result: then too drop the hack and use conditional comments instead.

[pre]
  <link rel="stylesheet" type="text/css" href="/style.css" />
  <!--[if IE 6]>
   <link rel="stylesheet" type="text/css" href="/ie6.css" />
  <![endif]-->
  <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="/ie7.css" />
  <![endif]-->[/pre]

As for specificity:

• the hack isn't recognized by FF, so there is gains nothing, and the id wins
  
• the hack is recognize din IE7 and gains more than the id alone, so the id alone isn't put into play.
  

Remember: The world is a better place without hacks!

[Wlauzon]

But, that is not the problem, apparently.

This is what I have in there now:

#bodyshell {
width: 86%;
border-left: solid 150px #400;
}
*:first-child + html #bodyshell {
width: 86%;
border-left: solid 150px #040;
}

If I use *only* one or the other, only one picks it up. (I have them set to different colors now so I can see what is going on).

What is odd is that if I use ONLY the #bodyshell, both pick up the border color, but IE7 does NOT pick up the width. I have to use both since Firefox will ignore the *:first-child statement.

This may be a width bug or selector bug in IE7, not sure what is going on. I thought it might be a "haslayout" bug, but none of the usual "fixes" work (like zoom: 1;)

Nowever, if I add "min-width: 86%;" to the #bodyshell statement it seems to work OK for both.

Not sure what it is doing in IE6, since my old computer died...

[edited by: Wlauzon at 5:02 am (utc) on May 18, 2008]