:nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen
Von: Jonas In diesem Beitrag erfahrt ihr wie :nth-Child in alten Internet Explorern verwendet werden kann.
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.
Noch eine kleine Falle gibt es, die man evtl berücksichtigen muss, wenn es um mehr als eine einfache „Zebratabelle“ geht: In der jQuery API-Dikumentation ist zu lesen, „Because jQuery’s implementation of :nth-selectors is strictly derived from the CSS specification, the value of n is „1-indexed“, meaning that the counting starts at „1“. For other selector expressions such as :eq() or :even jQuery follows JavaScript’s „0-indexed“ counting.“
Wer in modernen Browsern – wie in obigem Beispiel – mit :nth-child(2n+1) das 1., 3., 5. usw. Kind-Element anspricht, muss dieses Beispiel in jQuery folglich etwas anpassen. Dort muss es nämlich zu
$(‚table.demo tr:nth-child(2n-1)‘).addClass(‚missingNth‘);
umformuliert werden – also mit einem Minuszeichen anstelle des Pluszeichens im mathematischen Ausdruck.
[…] 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. […]
Das funktioniert auch mit allen Pseudoklassen? Also auch :before und :after oder :last-child, :first-child? Auf den 6er wird – zumindest bei uns in der Agentur – nicht mehr angepasst.
Ich denke es funktioniert mit allen Pseudoklassen. Bei
:beforeund:afterist es natürlich etwas schwierig das Pseudoelement übercontent:'';zu erzeugen.Sicher, es funktioniert wunderbar … sehr praktisch ist auch die unterstützung der Attributsselektoren.
Interessanter Lösungsansatz, ich verwende dafür die Selectivizr Bibliothek. Da muss ich nicht extra Klassen bereitstellen. Wenn man nth-child nur sehr wenig einsetzt ist dein Vorschlag sicher performanter. Selectivizr jedoch komfortabler.
Danke für den Tipp mit http://selectivizr.com/. Das Tool kannte ich noch gar nicht.