CSS3: Pseudo-Selektor :nth-child()

Der Pseudo-Selektor :nth-child() kommt dann zum Einsatz, wenn man mehrere Elemente gleichzeitig ansprechen möchte. Zum Beispiel lässt sich bei einer Tabelle mit :nth-child() sehr komfortabel jede zweite Zeile anderes gestalten.

Die HTML-Struktur

Code: html
  1. <table>
    
  2.   <tr>
    
  3.     <td>eins</td><td>zwei</td>
    
  4.   </tr>
    
  5.   <tr>
    
  6.     <td>drei</td><td>vier</td>
    
  7.   </tr>
    
  8.   <tr>
    
  9.     <td>fünf</td><td>sechs</td>
    
  10.   </tr>
    
  11. </table>

Die CSS-Befehle

Code: html
  1. tr:nth-child(odd) {
  2.      background-color: #ccc;
  3. } 
  4. tr:nth-child(even) {
  5.      background-color: #ddd
  6. }

Das Keyword odd spricht jede ungerade Zeilennummer der Tabelle an, während even alle geraden Zeilennummern anspricht.

  • 526
  • Letzte Änderung am Sonntag, 14 Februar 2016 15:44

Schreibe einen Kommentar

Bitte achten Sie darauf, alle Felder mit Stern * zu füllen. HTML-Code ist nicht erlaubt.

Heute47
Gestern362
Diese Woche47
Dieser Monat3429
Insgesamt241147

Who Is Online

3
Online

Montag, 11. Dezember 2017 03:37

Rückrufservice

Kontaktdaten

dats
Druckagentur Torsten Scheel

Malvenweg 8
44289 Dortmund

Telefon: 0231 | 13 86 86 18
E-Mail:  kontakt@torstenscheel.de