kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

: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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

6 Kommentare

  1. Wofi

    Verfasst am 23. Oktober 2012 um 9:57 Uhr.

    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.

  2. Dean

    Verfasst am 23. Oktober 2012 um 21:38 Uhr.

    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.

    • Jonas Hellwig

      Verfasst am 23. Oktober 2012 um 22:34 Uhr.

      Ich denke es funktioniert mit allen Pseudoklassen. Bei :before und :after ist es natürlich etwas schwierig das Pseudoelement über content:''; zu erzeugen.

    • Wofi

      Verfasst am 24. Oktober 2012 um 8:04 Uhr.

      Sicher, es funktioniert wunderbar … sehr praktisch ist auch die unterstützung der Attributsselektoren.

  3. Günther

    Verfasst am 19. Dezember 2013 um 15:40 Uhr.

    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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.