Anzeige
Anzeige
News
Artikel merken

CSS3: Abwechselnd gestaltete Spalten und Zeilen mit „nth-child“ und „nth-of-type“

Tabellenspalten und -zeilen abwechselnd zu gestalten hieß bislang immer, eigene Klassen für die jeweiligen Spalten oder Zeilen zu vergeben. Das ist insbesondere dann aufwändig, wenn eine Spalte oder Zeile nachträglich eingefügt wird. Seit CSS3 gibt es mit mit „nth-child“ und „nth-of-type“ zwei Pseudoklassen, mit denen ein solches Vorhaben einfach umzusetzen ist.

Von Denis Potschien
2 Min. Lesezeit
Anzeige
Anzeige

CSS3 und „nth-child“

Bei der CSS3-Pseudoklasse „nth-child“ lassen sich Styleangaben nur auf bestimmte Kind-Elemente anwenden. Nehmen wir als Beispiel eine Tabelle mit n Spalten und Zeilen:

<table>
<tr><td>Zeile1, Spalte 1</td><td>Zeile1, Spalte 2</td><td>Zeile1, Spalte 3</td></tr> <tr><td>Zeile2, Spalte 1</td><td>Zeile2, Spalte 2</td>><td>Zeile2, Spalte 3</td></tr>
<tr><td>Zeile3, Spalte 1</td><td>Zeile3, Spalte 2</td>><td>Zeile3, Spalte 3</td></tr>
</table>
Anzeige
Anzeige

Mit der Pseudoklasse „nth-child“ können wir die Spalten und Zeilen unterschiedlich aussehen lassen. Die einfachste Möglichkeit ist, gerade und ungerade Spalten unterschiedlich aussehen zu lassen – mit den Schlüsselwörtern „even“ und „odd“:

td:nth-child(even) {
  background-color: #ffe37f;
}

td:nth-child(odd) {
  background-color: #19dc3c;
}

Ausgangspunkt für die CSS3-Pseudoklasse „nth-child“ ist das jeweilige Elternelement – in diesem Fall das TR-Element. Allen geraden Kindelemente werden die Styles von „nth-child(even)“ zugewiesen und allen ungeraden Kind-Elementen die Styles von „nth-child(odd)“.

Anzeige
Anzeige

Neben der Verwendung von Schlüsselwörtern können auch Zahlen eingesetzt werden, um ein ganz bestimmtes Kind-Element anzusprechen:

Anzeige
Anzeige
td:nth-child(2) {
  background-color: #ffe37f;
}

Bei der Angabe „nth-child(2)“ wirken sich die Styleangaben ausschließlich auf das zweite Kind-Element aus. Alternativ zu „nth-child“ existiert noch die Pseudoklasse „nth-last-child“. Sie macht dasselbe wie „nth-child“ mit dem Unterschied, dass hier vom letzten anstatt vom ersten Element gezählt wird. „nth-last-child(2)“ wirkt sich also auf das zweitletzte Element aus.

Als dritte Möglichkeit neben der Verwendung von Schlüsselwörtern und Zahlen für „nth-child“ lassen sich auch komplexere Abfolgen in der Form von „an+b“ verwenden. „a“ steht hierbei für eine Zahl, die den Intervall für die Wiederholung angibt. „b“ steht für das Element, auf das erstmalig die Styleangaben angewendet werden sollen:

Anzeige
Anzeige
td:nth-child(2n) {
  background-color: #ffe37f;
}

Die Angabe „2n“ ist identisch mit „even“, da hier jedes zweite Element beziehungsweise alle geraden Elemente angesprochen werden. „2n+1“ ist identisch mit „odd“, da hier zwar auch jedes zweite Element angesprochen wird, die Zählung aber beim ersten Element beginnt. Mit „3n“ wird jedes dritte Element angesprochen. „3n+2“ spricht ebenfalls jedes dritte Element an; die Zählung beginnt allerdings beim zweiten Element.

CSS3 und „nth-of-type“

Neben „nth-child“ gibt es noch die Pseudoklasse „nth-of-type“, die vom Grundprinzip identisch ist mit „nth-child“. Während „nth-child“ bei der Zählung alle Elemente berücksichtigt, zählt „nth-of-type“ nur Elemente des gleichen Typs mit:

<h1>Überschrift 1</h1>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<h1>Überschrift 2</h1>
<p>Absatz 4</p>
<p>Absatz 5</p>

Wird „nth-child“ auf das P-Element angewendet, werden bei der Zählung auch die H1-Elemente berücksichtigt. Im Ergebnis heißt das, dass bei „p:nth-child(even)“ die Styleeigenschaften auf Absatz 1, 3 und 4 angwendet werden. Bei „p:nth-of-type(even)“ werden bei der Zählung nur P-Elemente berücksichtigt. Die Styleangaben wirken sich nur auf Absatz 2 und 4 aus:

Anzeige
Anzeige
p:nth-of-type(even) {
  background-color: #ffe37f;
}

Auch für „nth-of-type“ gibt es die alternative Pseudoklasse „nth-last-of-type“, die vom letzten Kindelement beginnend zählt.

CSS3: „nth-child“ (links) und „nth-of-type“ (rechts)

CSS3: „nth-child“ (links) und „nth-of-type“ (rechts)

Was haltet ihr von „nth-child“ und „nth-of-type“? Nutzt ihr sie? Habt ihr weitere Beispiele für ihren Einsatz?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
10 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Sascha

Hab diesen Weg aus Twitter’s Bootstrap und nutze es nun fast überall, da es wesentlich eleganter ist, als der übliche Weg mit PHP + even / odd Klasse an ein Element zu hängen.

Antworten
Frisela

Super, das wird eine der häufigst genutzten JavaScript Einbindungen ersetzen, die nur dafür da waren Stylingclassen zu vergeben.

Antworten
psren

Auch interessant ist das Streifenmuster als „vertical-zebra“ auf cols/colgroup anzuwenden :-D
Zusammen mit dem „horizontal-zebra“ einer Tabelle und RGBA mit Transparent sieht das ziemlich cool aus :-D

Antworten
Knobibrot

Tolle Sache, doch leider werd ich für den IE6 immer noch einen JavaScript- oder PHP-Fallback einsetzen müssen. Denn der steht bei meinen Kunden noch immer auf der „Must-Have“-Liste

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige