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

Webdesign-Seminare von kulturbanause

Im Rahmen der medien[plan]tage bieten wir im Juni folgende Seminare in Bremen an:

3. + 4. Juni – Grundkurs HTML5/CSS3
5. Juni – Moderne Webseiten gestalten

: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