2 1 11 33 0 0 0

Listendarstellung

Listen zu verwenden ist täglich Brot. Dennoch .

Listendarstellung mit <ul> und <ol>

Aufzählungsliste <ul>, das Schichtenmodell

    <ul> 1. Schicht
  • <li> Erstes Listenelement</li>
      • <ul> 2. Schicht
    • <li> vor dem zweiten Listenelement wird ein weiteres <ul> eingesetzt
      und rückt somit nochmals ein.</li>
    • <li> nachdem </li> das schließende </ul> </li>
      • </ul> Ende 2. Schicht
  • <li> und hier ist wieder eingerückt wie das 1. li-Element </li>
      <ul> 2. Schicht
    • <li> wieder zweite Schichtung. </li>
        <ul> 3. Schicht
      • <li> und ein li in dritte Schicht </li>
      • <li> noch ein li </li>
        • </ul> Ende 3. Schicht
      • </ul> Ende 2. Schicht
    • </ul> Ende 1. Schicht

Die <ul>-Schichten kann man beliebig ausweiten und werden mit unterschiedlichen führenden Zeichen: Punkt, Kreis, Quadrat u.s.w. gekennzeichnet. Naja, alles bekannt! Ob man das toll findet, ist Geschmackssache. Entweder alles weg: list-style-type: none; oder einheitlich mit list-style-type: disc; einem • ( wie &bull; ) weiter.
Anmerkung: Die rot dargestellten <ul> und <li> sind nur zur Demonstration.
In früheren Abhandlungen konnte man das <li>-Element noch als nicht geschlossen vorfinden. Nun gehört es wohl zum Standart.

Auf <ul> - Listen (als ungeordnet bezeichnet) können die Eigenschaften:

  • disc, gefüllter Kreis als Bullet-Zeichen, Voreinstellung
  • circle, leerer Kreis als Bullet-Zeichen
  • square, quadratisches Bullet-Zeichen
  • none, kein Bullet-Zeichen
  • inherit, Bullet-Zeichen des Elternelements

angewandt werden. Wenn es nicht auf <! selfhtml.wiki /> und nicht zu vergessen der alten SELFHTML-Anleitung beschrieben wäre, würde ich das auch nicht wissen!

Für <ol> Listen (als geordnet bezeichnet) sind die weiteren Auszeichnungen:

  • decimal, Nummerierung 1., 2., 3., 4. usw.
  • decimal-leading-zero, Nummerierung 01., 02., 03., 04. usw.
  • lower-roman, Nummerierung i., ii., iii., iv. usw.
  • upper-roman, Nummerierung I., II., III., IV. usw.
  • lower-alpha, Nummerierung a., b., c., d. usw.
  • lower-latin, wie alpha
  • upper-alpha, Nummerierung A., B., C., D. usw.
  • upper-latin, wie alpha
  • none, keine Nummerierung
  • inherit, Nummerierung des Elternelements

Na dann!

Nummerierte Liste <ol> und der Einsatz von :nth-child()

Style-Eigenschaften für <div id='upper'>:

15
16
17
18
#upper{  }
#upper ol {list-style-type: upper-roman;}
#upper ol > li:first-child { color: red; }
#upper ol > li:nth-child(2) { color: green;}
  1. eine mit: ol > li:nth-child(1) { color: reg; } gekennzeichnete Zeile
  2. eine mit: ol > li:nth-child(2) { color: green;} gekennzeichnete Zeile
  3. eine mit: ol > li:nth-child(3) { color: blue; }gekennzeichnete Zeile

Und jetzt wird verschachtelt und die Eigenschaften aus der lokalen CSS-Formatierung übernommen! Der Container hat die ID="anders", damit gleichlautende <ol>-Beschreibungen hier nicht wirken können wie z.B.:
also #anders ol:nth-child(2).

21
22
23
24
25
26
27
28
29
30
31
32
33
#anders {  }
#anders ol:nth-child(1) { color: red; list-style-type: upper-roman; }
#anders ol:nth-child(2) { color: green; list-style-type: decimal; }
#anders ol:nth-child(3) { color: blue; list-style-type: lower-alpha; }
#anders ol:nth-child(4) { color: purple; list-style-type: inherit; }
#anders ol:nth-child(5) { color: DarkSlateGray; list-style-type: inherit; }
#anders ol:nth-child(6) { color: tomato; list-style-type: decimal; }
#anders ol > li:first-child { color: RoyalBlue;  }
#anders ol > li:nth-child(2) { color: maroon; }
#anders ol > li:nth-child(3) { color: teal; }
#anders ol > li:nth-child(4) { color: chocolate;  }
#anders ol > li:nth-child(5) { color: navy; }
#anders ol > li:nth-child(6) { color: purple; }
    <ol1> ol:nth-child(1) { color: red; list-style-type: upper-roman; }
  1. Basis - (li:nth-child(1)) || (li:first-child)
  2. Basis - (li:nth-child(2))
      3. <ol2> ol:nth-child(2) { color: green; list-style-type: decimal; }
    1. nächste Schicht - (li:nth-child(1)) wo sind meine führenden Zahlen
    2. gleiche Schicht - (li:nth-child(2))
    3. gleiche Schicht - (li:nth-child(3))
        4. <ol3> ol:nth-child(3) { color: blue; list-style-type: lower-alpha; }
      1. letzte Schicht - (li:nth-child(1))
      2. letzte Schicht - (li:nth-child(2))
      3. letzte Schicht - (li:nth-child(3))
        4. </ol3>
    4. vorherige also 2. Schicht - (li:nth-child(4)), würde ich so sehen!
      Sehe aber aus wie 5. mit der Farbe navy
      5. </ol2>
  3. Basis - (li:nth-child(3)),
  4. Basis - (li:nth-child(4))
    5. </ol1>

Die Schichten habe ich nach erster Vorstellung beschriftet. Das Ergebnis ändert sich mit Einfügen neuer Elemente oder Löschen. Da bleiben eine Menge Fragen für die praktische Umsetzung offen! Das Farbdurcheinander ist zur Demonstration.

127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146		 <div id='anders'>
 <ol>&lt;ol1&gt; ol:nth-child(1) { color: red; list-style-type: upper-roman; }
  <li>Basis - (li:nth-child(1)) || (li:first-child)</li>
  <li>Basis - (li:nth-child(2))</li>
  <ol>&lt;ol2&gt; ol:nth-child(2) { color: green; list-style-type: decimal; }
   <li>nächste Schicht - (li:nth-child(1)) wo sind meine führenden Zahlen</li>
   <li>gleiche Schicht - (li:nth-child(2))</li>
   <li>gleiche Schicht - (li:nth-child(3))</li>
   <ol>&lt;ol3&gt; ol:nth-child(3) { color: blue; list-style-type: lower-alpha; }
    <li>letzte Schicht - (li:nth-child(1))</li>
    <li>letzte Schicht - (li:nth-child(2))</li>
    <li>letzte Schicht - (li:nth-child(3))</li>&lt;/ol3&gt;
   </ol>
   <li>vorherige also 2. Schicht - (li:nth-child(4)), würde ich so sehen! 
        <br />Sehe aber aus wie 5. mit der Farbe navy</li>&lt;/ol2&gt;
  </ol>
  <li>Basis - (li:nth-child(3)), </li>
  <li>Basis - (li:nth-child(4))</li>&lt;/ol1&gt;
 </ol>
</div>    

In 130: könnte ich <ol> durchaus als drittes Kind von <ol> aus 127: verstehen. Somit sind die führenden Listenangaben nicht dezimal sondern alpha. Löscht man das 2. Listenelement II.Basis - (li:nth-child(2)) stehen <ol2> wieder Zahlen voran.
Dann ist somit d aus der 2. Schicht 5. Kind, weil <ol3> sich als 4. Kind herausstellt. usw. usw.
PAUSE
Will jemand wirklich sowas machen?

Nummerierte Liste <ol> direkt formatiert

    <ol1> style="list-style-type: upper-roman; color: red;"
  1. Basis mit Bezug zur 2. Schicht
      2. <ol2> style="list-style-type: decimal; color: green;"
    1. zweite Schicht: erstes Listenelement
      2. </ol2>
  2. Basis Bezug zur 2. Schicht
      3. <ol2> style="list-style-type: decimal; color: green;"
    1. zweite Schicht: es wird ein Startwert von 20 übergeben, weil eine Beziehung zu Basis II. ersichtlich sein soll.
      <li value="20"> Hinweis: Es müssen doppelte Anführungszeichen verwendet werden!
    2. zweite Schicht und Bezug zur 3. Schicht
        3. <ol3> style="list-style-type: lower-alpha; color: blue;"
      1. letzte Schicht
      2. letzte Schicht
      3. letzte Schicht
        4. </ol3>
    3. zweite Schicht
      4. </ol2>
  3. Basis
  4. Basis
    5. </ol1>

Die farbliche Unterscheidung des <ol>-tags dient nur der besseren Übersicht. Die Listenelementen <li> übernehmen nun aber auch die Eigenschaften: römisch, zahl und alpha. Es geht doch!
Damit es zu keinen Stylesheet-Überschneidungen kommt, werden alle Beispiele in getrennten Containern gelagert und entsprechend in den Stylesheet-Definition vermerkt wie:
#anders ol:nth-child(2) { color: green; list-style-type: decimal; }
Fazit für nth-child(: Mit jeder Änderung der Elemente durch Hinzufügen oder Löschen wird die Bestimmung des (n-ten) unbrauchbar. Eine klare farbliche und listentypbezogene Eigenschaft zu verleihen, artet in Frickelei aus. Für mich fällt sowas in der Praxis aus.


Dokument geändert am: 24. Aug. 2016 20:50