CSS Snippet – Listenpunkte mit Überschrift
Kommentare(2) Bei der Erstellung meiner Equipment-Seite stieß ich auf das Problem, einer HTML-Liste (in diesem Fall <ol>, eine geordnete Liste) für jeden Listenpunkt eine Überschrift hinzufügen zu können. Hiermit ist keine Überschrift im semantischen Sinne gemeint, sondern im visuellen. Die erste Zeile der Liste sollte immer Fett sein und eine andere Farbe haben. Früher hätte ich um jede erste Zeile ein <span> mit entsprechender CSS Formatierung gelegt. Viel zu kompliziert und zuviel Aufwand!
Lösung:
Völlig vergessen hatte ich, dass es doch eine schöne CSS Pseudoklasse gibt, namens :first-line. Also frisch ans Werk und eine Klasse für die Liste geschrieben, die jedem Listenpunkt eine fette, andersfarbige erste Zeile zuweist. Die Klasse wird dem <ol> (oder auch <ul> Element folgendermaßen zugewiesen:
<ol class="liste">
<li>Inhalt, der fett sein soll <br/>
Inhalt, der nicht extra formatiert wird </li>
</ol>
Der CSS Code der dafür Notwendig ist ist eine CSS Klasse die mit li:first-line immer die erste Zeile der Liste anspricht.
.liste li:first-line {
font-weight:bold;
color:#deba1e;
}
Ein Beispiel wie das aussehen kann gibt es hier.
Update (17.03.2008)
Leider sind sich die verschiedenen Browser noch nicht darüber einig, wie das dann in der Darstellung aussehen sollte. Unterschiede ergeben sich in der Darstellung der Zahl bei einer geordneten Liste. Diese wird entweder genauso formatiert wie die erste Zeile (IE 7, Opera 9), oder so formatiert wie der übrige Text (Firefox 2, Safari). Wäre mal eine Diskussion wert, ob der Listenpunkt zur ersten Zeile gehört, oder nicht.