Tabellenzellen selektieren mittels CSS3

CSS3 bringt uns ja viele schöne neue Selektoren, unter anderem den „:not„-Selektor. Ich habe damit ein kleines Experiment gemacht und war vom Ergebnis verblüfft. Ich wollte „alle Tabellenzellen, ausser der erste und der letzten“ selektieren. Dafür kombinierte ich zweimal den „:not„-Selektor:

td:not(:first-of-type):not(:last-of-type){background: yellow}

Ein zweiter Versuch sah so aus:

td:not(:first-child):not(:last-child){background: yellow}

Das Ergebnis war nicht wie erwartet eine Gelbfärbung aller Tabellenzellen, bis auf die erste und die letzte. Vielmehr galt die Selektion pro Tabellenzeile. Ich habe ernsthaft gedacht, nicht die Tabellenzeile, sondern die Tabelle sei der absolute Bezugspunkt.

Nachtrag: nach ein paar wenigen weiteren Tests bin ich auf den Selektor gestossen, der mir innerhalb einer Tabelle alle Zellen, bis auf die erste und die letzte selektiert. Er sieht nicht intuitiv aus, funktioniert aber:

tr:first-of-type td:not(:first-of-type),
tr:not(:first-of-type):not(:last-of-type) td,  
tr:last-of-type td:not(:last-of-type) {background: yellow}

2 Kommentare

  1. Warum so kompliziert? So ist es doch einfacher: http://dabblet.com/gist/1654661

    tbody tr {background-color:yellow;}
    tbody tr:first-child td:first-child,
    tbody tr:last-child td:last-child {background-color:white;}

    (Ich schließe aber nicht aus, dass ich die Fragestellung nicht richtig verstanden habe… 🙂

    • Danke für den Klaps auf den Hinterkopf, Eric. Da habe ich wohl zu kompliziert gedacht. Deine Lösung ist besser.