Erfahren Sie, wie Sie die CSS-Pseudoklasse first-child im Internet Explorer 6 nutzen können.

Der Internet Explorer vor der Version 7 unterstützt leider die CSS-Pseudoklasse first-child nicht. Alex Mauzon hat einen kleinen Trick veröffentlicht mit dem man diese Funktionalität trotzdem erreichen kann.

Will man z.B. die erste H3-Überschrift ohne Abstand nach oben definieren, geht das mit CSS in der Regel so:

h3 { margin-top: 1em; }
h3:first-child { margin-top: 0px; }

Der Internet Explorer unterstützt leider diese Funktionen nicht. Man kann aber per Conditional Tags und IE-spezifischen Funktionen trotzdem das gleiche Ergebnis erzielen. Folgender Code kann dazu genutzt werden:

<!--[if IE 6]>
<style type="text/css">
h3 { margin-top: expression(this.previousSibling==null?'0px':'1em'); }
</style>
<![endif]-->

Mit den Conditional Tags wird zunächst abgefragt, ob es sich um den IE 6 handelt. Ist das der Fall, wird der folgende Code ausgeführt. Dieser überprüft auf DOM-Ebene ob es sich um das erste Element handelt. Das geschieht in dem versucht wird ein Element vor dem aktuellen zu ermitteln. Ist keines vorhanden, handelt es sich automatisch um das erste Element.

Diskussion

24. Apr 2009 von schildi

die schreibweise machte probleme. lösung unter:

http://forum.de.selfhtml.org/?t=186070&m=1235558