CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/nth-child

Aus SELFHTML-Wiki
< CSS‎ | Selektoren‎ | Pseudoklasse(Weitergeleitet von Nth-child)
Wechseln zu: Navigation, Suche

Mithilfe des Selektors :nth-child() ist es möglich, das n-te Kind eines Elternelementes zu selektieren. Der Selektor erwartet als Argument einen mathematischen Ausdruck, der einer arithmetischen Zahlenfolge mit ganzzahligen Koeffizienten entspricht.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

  • :nth-child(an+b) selektiert all diejenigen Kindelemente deren „Platznummer“ bei Division durch a den Rest b lässt.
  • :nth-child(odd) ist identisch zu :nth-child(2n+1) und :nth-child(2n-1) (ungerade Platznummer).
  • :nth-child(even) ist identisch zu :nth-child(2n) (gerade Platznummer).
  • :nth-child(b) selektiert nur das b-te Kindelement.
  • :nth-child(n) selektiert alle Kindelemente.


Anwendungsbeispiele[Bearbeiten]

Tabelle im Zebralook[Bearbeiten]

Beispiel ansehen …
      table {width: 95%;}
      th {
        background-color: #666; 
        color: #fff;
      }
      tr {
        background-color: #fffbf0;
        color: #000;
      }
      tr:nth-child(odd) {
        background-color: #e4ebf2;
      }
Mit tr:nth-child(odd) {background-color: #e4ebf2;} erhält jede ungerade Tabellenzeile eine andere Hintergrundfarbe.
    <table>
      <tbody>
        <tr><th>Zeile</th><th>Inhalt</th></tr>
        <tr><td>7</td><td>Text</td></tr>
        <tr><td>6</td><td>Text</td></tr>
        <tr><td>5</td><td>Text</td></tr>
        <tr><td>4</td><td>Text</td></tr>
        <tr><td>3</td><td>Text</td></tr>
        <tr><td>2</td><td>Text</td></tr>
        <tr><td>1</td><td>Text</td></tr>
        <tr><td>0</td><td>Text</td></tr>
      </tbody>
   </table>
In diesem Beispiel wird eine Tabelle dargestellt.

Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann wird jede zweite Zeile mit

tr:nth-child(odd) {
       background-color: #e4ebf2 ;
}
anders eingefärbt.
Vorteil: Die Einfärbung wird erst im CSS festgelegt. Wenn eine weitere Zeile im HTML eingefügt wird, sind keine weiteren Änderungen am CSS nötig.

Feld mit Schachbrettmuster[Bearbeiten]

Tabelle mit Schachbrettmuster ansehen …
table { border-collapse: collapse; } td { width: 30px; height: 30px; border: thin solid; } tr:nth-child(odd) td:nth-child(odd) { background: black; } tr:nth-child(even) td:nth-child(even) { background: black; }
    <table>
	<tbody>
	  <tr><th>8</th><td></td>...<td></td></tr>
	  
          ...

	  <tr><th>1</th><td></td><td>...<td></td></tr>
	  <tr><th></th><th>A</th>...<th>H</th></tr>
	</tbody>
	</table>
In diesem Beispiel wird ein Schachbrett dargestellt. Neben den 8x8 Feldern, die durch normale Tabellenzellen dargestellt werden, erhält es mit th-Elementen noch Bezeichnungen für Spalten (A-H) und Reihen (1-8).

Zunächst werden in den ungeraden Tabellenzeilen alle ungeraden Tabellenfelder mit einem schwarzen Hintergrund versehen. Deshalb ist z.B. das Feld B8 schwarz gefärbt, denn es ist das dritte Kind der Tabellenzeile.

Anschließend werden in den geraden Tabellenzeilen die geraden Tabellenfelder eingefärbt. A7 z.B. ist schwarz, denn dieses td-Element ist das zweite Kind der Zeile.

Siehe auch das Beispiel für die Pseudoklasse nth-of-type().

Exkurs: Schachbretter mit HTML und CSS[Bearbeiten]

Das oben gezeigte Beispiel hat keinen praktischen Nutzen. Für ein Schachspiel wäre es wichtig, die Reihen und Spalten (mit Klassen oder über den nth-of-type-Selektor klar identifizieren zu können.

Im SELF-Forum gab es die Idee ein CSS-Schachbrett mit Grid Layout umzusetzen, das weniger Elemente benötigen würde. Auch wenn man bei einer reinen div-Lösung die tr-Elemente sparen würde, wäre die CSS-Formel für die unterschiedliche Färbung der Reihen viel aufwendiger.

Die Kennzeichnung der Spalten und Reihen könnte mit Pseudoelementen durchgeführt werden.

Als radikalste Lösung könnte man nur ein Element für das Brett an sich verwenden und es mit sich überlagernden repeating-linear-gradient()-Hintergründen oder dem SVG-pattern-Element füllen.

--Matthias Scharwies (Diskussion) 09:52, 5. Aug. 2019 (CEST)

Weblinks[Bearbeiten]