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}
- ← Previous
Adventskalender vom 24. Dezember - Next →
Das CSS3 Click Chart