: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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
: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
Geschrieben von Jonas
Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.
Seminare mit Jonas Hellwig anzeigen – Jonas Hellwig bei Xing
Feedback & Ergänzungen – 7 Kommentare
Kommentar zu dieser Seite
Wir veröffentlichen regelmäßig neue Inhalte zum den Themen Design und Development.
Du willst nichts verpassen? Dann abonniere jetzt unseren Newsletter, folge uns auf Facebook und Twitter oder abonniere einen unserer RSS-Feeds.
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →
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.