: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.
Responsive Web Design-Seminar von kulturbanause in Berlin
Wir machen dich fit für die Zukunft des Web.
9. April 2014 (Zusatzveranstaltung) → Mehr Infos: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.