In einer <ol>-Liste eine sichtliche Abtrennung vornehmen
bearbeitet von Rolf BHallo Gunnar,
> Dazu müsste man aber wissen, wie lang die erste Liste ist.
In statischem HTML hast Du recht. Ein `start="4"` in der zweiten Liste wäre dann eine magische Zahl. Aber wenn das HTML dynamisch generiert wird, ist das kein Problem.
> nth-child - keine gute Idee
Wenn die erste Liste variabel lang ist, ja. Wenn es um die Top-3 geht, ist es wieder egal. Es kommt halt auf den Anwendungszweck an.
> Die Stelle für den Trennstrich könnte man mit .NRW + .Hessen selektieren.
Die Idee einer Kategorie-Klasse hatte ich auch schon, aber ich halte einen Selektor dieser Art für eine fatale Lösung. Denn dann muss das CSS fachspezifische Inhalte enthalten. Die gehören da meiner Auffassung nach niemals nicht hinein. Was ist, wenn noch Bayreuth, Augsburg und Passau hinzukommen? Du musst das CSS erweitern, weil fachlich ein Bundesland dazu kommt. Ansonsten zanken sich unterm Strich die Hessen mit den Bayern. Huiuiui, aus Berliner Sicht mag das alles ein Haufen Volk mit unverständlicher Sprache irgendwo jenseits der Elbe sein, aber vor Ort wird man das anders sehen...
Ein CSS Selektor, der erkennt, dass eine Klasse wechselt, müsste das lösen, aber ich kann mir nicht vorstellen wie das mit CSS formulierbar wäre. Vor allem angesichts der Tatsache, dass die LI mehr als eine Klasse haben könnten und es nur um den Wechsel der Kategorieklasse gehen sollte.
Deswegen dürfte das Setzen der Übergangspunkte im HTML wohl am sinnvollsten sein, solange es nur im einen Strich geht. Wenn es Gliederungsüberschriften gibt, bleibt nur das Trennen in mehrere Listen. Und dann ist vermutlich ein selbstgemachter CSS Counter die beste Methode, das übergreifend zu nummerieren:
~~~html
<style>
dl { counter-reset: stadt; }
dt { font-weight:bold; }
dd { margin-left: 0; }
dd ol { margin: 0.5em 0 0.3em 0; padding: 0; }
dd li { list-style:none }
dd li::before {
counter-increment: stadt;
content: counter(stadt) ".";
display: inline-block;
width: 2em; margin-right: 0.5em;
text-align:right;
}
</style>
<!-- im Body: -->
<dl>
<dt>Nordrhein-Westfalen</dt>
<dd><ol>
<li>Bonn</li>
<li>Köln</li>
<li>Münster</li>
</ol></dd>
<dt>Hessen</dt>
<dd><ol>
<li>Hanau</li>
<li>Gießen</li>
<li>Kassel</li>
</ol></dd>
</dl>
~~~
_Rolf_
--
sumpsi - posui - clusi