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

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

: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