Implement :first-child for IE6

beThinker — Sat, 10 Oct 2009 03:05:11 +0000

Lots of CSS hack for :first-child but I used this one because it work. I’m using list tag for my menu and it look like this in the HTML.

1
2
3
4
5
6

Menu1

Menu2

Menu3

Menu4

Regular CSS for FF, IE7, Opera, Safari:

Image border:

1
2
3
4
5
6
7
8
9

#menu ul li#imageBorder{
background-image:url(../images/border.jpg);
background-repeat:no-repeat();
width:1px;
height:10px;
}
#menu ul li#imageBorder:first-child{
background-image:none;
}

Regular border:

1
2
3
4
5
6

#menu ul li{
border:1px solid #000;
}
#menu ul li:first-child{
border:none;
}

The above code :first-child won’t work in IE6, so for IE6 CSS hack the code are:

CSS for IE 6 (using conditional comments)

1
2
3
4
5
6
7
8

There are various CSS hack in web, look for the best that work in your website.

beThinker Concepts - Knowledge in many different ways » CSS Hack

Implement :first-child for IE6