CSS Kochbuch

8.5 Stildefinitionen für Tabelleninhalte

Problem

Die Links innerhalb von Tabellenzellen sollen anders dargestellt werden als im Rest des Dokuments.

Lösung

Benutzen Sie einen Selektor für Nachfahrenelemente (auch als Kontextselektor bezeichnet), um die Stile für den Zelleninhalt festzulegen:

td a {
 display: block;
 background-color: #333;
 color: white;
 text-decoration: none;
 padding: 4px;
}

Diskussion

Durch die Kombination eines Typselektors und eines Nachfahrenselektors in einer CSS-Regel können Sie auch mit geringem Aufwand bei der Strukturierung Ihres Dokuments ein gutes Design erreichen und gleichzeitig die Dateigröße klein halten. Die per td a definierten Stile werden nur auf a-Elemente angewandt, die sich innerhalb von Tabellenzellen (td) befinden. ...