Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Links zum Thema

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Günther
    schrieb am 19.12.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.

    Antworten
  2. :nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen | Web-CMS | Scoop.it
    schrieb am 06.11.2012 um 21:17 Uhr:

    […] 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.  […]

    Antworten
  3. Dean
    schrieb am 23.10.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.

    Antworten
    • Jonas Hellwig
      schrieb am 23.10.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.

      Antworten
    • Wofi
      schrieb am 24.10.2012 um 08:04 Uhr:

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

      Antworten
  4. Wofi
    schrieb am 23.10.2012 um 09: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.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

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 →