L’attribut CSS :first-child est bien utile dans de nombreux cas. Pour rappel, il permet de cibler le premier enfant d’un élément.

Par exemple, via le code suivant, vous aurez le premier div enfant du div “monDiv” qui sera rouge, et les deux autres verts :

HTML :

<div id="monDiv">
	<div>Hello</div>
	<div>Crazy</div>
	<div>World</div>
</div>

CSS :

div#monDiv div {
	background-color:green;
}

div#monDiv div:first-child {
	background-color:red;
}

Ca qui donnera :

IE6 ne gérant pas l’attribut first-child, nous allons l’émuler via du javascript directement dans le CSS via la propriété expression :

div#monDiv div {
    background-color: expression(this.previousSibling==null?'red':'green');
}

Comme vous avez sans doute compris, la propriété expression permet de mettre du code JS dans la feuille de style CSS, en ayant le keyword this associé à l’élément. Cela ouvre pas mal de possibilités (welcome to the dark side).

Ce code ne valide pas, donc est a mettre dans une feuille de style à part via des conditional comments.

A noter que ce code ne fonctionnera pas si le javascript n’est pas activé. Néanmoins, à l’heure actuelle, AMHA on est est plus a faire des sites devant fonctionner parfaitement sur IE6, mais simplement des sites fonctionnant convenablement, donc cette solution est acceptable.