Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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]