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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Selektor :nth-last-child() funktioniert in völliger Analogie zu :nth-child(), nur dass die Zählung von hinten beginnt.

  • CSS 3.0
  • IE 9
  • Leer
  • Safari
  • Chrome
  • Opera
Beispiel ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS-Beispiel: Pseudoklasse nth-last-type</title>
    <style>
      table {
        width: 60%;
        border-collapse: collapse;
        table-layout: fixed;
      }
      th, td {
        border: thin solid #000;
      }
      th {
        background-color: #666; 
        color: #fff;
      }
      tr {
        background-color: #fffbf0;
        color: #000;
      }
      tr:nth-last-child(3n+1) {
        background-color: #e4ebf2 ;
        color: #000;
      }
    </style>
  </head>
  <body>
  <main>
    <h1>CSS-Beispiel: Pseudoklasse nth-last-type</h1>
    <table>
      <tbody>
        <tr><th>1. Zeile</th><th>Inhalt</th></tr>
        <tr><td>2</td><td>Text</td></tr>
        <tr><td>3</td><td>Text</td></tr>
        <tr><td>4</td><td>Text</td></tr>
        <tr><td>5</td><td>Text</td></tr>
        <tr><td>6</td><td>Text</td></tr>
        <tr><td>7</td><td>Text</td></tr>
        <tr><td>8</td><td>Text</td></tr>
        <tr><td>9</td><td>Text</td></tr>
      </tbody>
   </table>
  </main>
</body>
</html>
In diesem Beispiel wird eine Tabelle dargestellt. Zunächst werden alle Zeilen mit background:#fffbf0; eingefärbt. Dann werden mit Hilfe des Ausdrucks tr:nth-last-child(3n+1) { background-color: #e4ebf2; } die Zeilen 3, 6 und 9 (also die 1., 4. und 7. Zeile von hinten) anders eingefärbt.

Weblinks[Bearbeiten]