:nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen
Mit der CSS-Pseudoklasse :nth-child lassen sich Elemente nach einem berechneten Muster ansprechen. Ein häufiges Anwendungsgebiet ist beispielsweise das abwechselnde Einfärben von Tabellenzeilen. Einen ausführlichen Artikel zu dieser CSS-Eigenschaft habe ich bereits vor einiger Zeit veröffentlicht.
Leider unterstützt der Internet Explorer das Pseudoelement erst ab Version 9, doch mit ein wenig JavaScript kann das Verhalten ebenfalls erreicht werden.
Webdesign mit Photoshop CS6!
Mein Video-Training mit über 11 Stunden Laufzeit! Profi-Techniken für modernes Webdesign - mit zahlreichen Tipps für das mobile Web.
Jetzt bei Amazon bestellen!:nth-child über jQuery ansprechen
Das Prinzip ist denkbar einfach. Da jQuery im Gegensatz zum Internet Explorer die :nth-child-Pseudoklasse verstehen kann, fügen wir per JavaScript den entsprechenden Elementen eine zusätzliche Klasse namens .missingNth hinzu. In diesem Beispiel sollen die Tabellenzeilen (tr) der Tabelle .demo abwechselnd gefärbt werden.
$('table.demo tr:nth-child(2n+1)').addClass('missingNth');
Im CSS-Code erhält diese Klasse dann die gleichen Eigenschaften wie die eigentliche Pseudoklasse.
table.demo tr:nth-child(2n+1) { /* code für gute browser */ }
table.demo tr.missingNth { /* code für <IE9 */ }
Da die Funktion nur in alten IEs benötigt wird, sollte der JavaScript-Code über einen Conditional Comment ausgegeben werden.