:nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen

ie8-jquery

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.

: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.

Links zum Thema