Box-Fenster Tertius - Die Abschnitte im Inhalt
Mit Pseudo-Element 'nth-child(n)'
Auf der Seite (index.html) sehen Sie im Inhaltsbereich mehrere
Abschnitte, die farbig getrennt sind. Wie wir diese angelegt haben und
wie Sie auch mehr oder weniger Abschnitte anlegen können,
erklären wir Ihnen nachstehend.
Der Pseudo-Selektor :nth-child(n) ist sehr hilfreich, wenn man gleiche
Elemente innerhalb eines Elternelement verschieden aussehen lassen
möchte. Insbesondere bei Wiederholungen ist dies effektiv.
Alle Möglichkeiten:
SELFHTML-Wiki beschreibt es, aber
noch viel übersichtlicher und mit sehr vielen Beispielen
erklärt es die Webseite
h5c3 .
Die wichtigsten Möglichkeiten:
Wie an den vorstehend genannten Links zu sehen, gibt es mehrere
'nth-child-Selektoren'. Nachfolgend möchten wir aber Ihnen die
wichtigsten beschreiben:
1.)
Einfache 'nth-child-Selektoren':
1.a) Spricht jeden Abschnitt individuell an:
'nth-child(1)' spricht den ersten Abschnitt an.
'nth-child(2)' spricht den zweiten Abschnitt an.
'nth-child(3)' spricht den dritten Abschnitt an.
'nth-child(4)' spricht den vierten Abschnitt an usw.
1b) Spricht jeden zweiten Abschnitt an:
'nth-child(odd)' spricht jeden ungeraden Abschnitt
an (also 1, 3 ,5, 7 usw).
'nth-child(even)' spricht jeden geraden Abschnitt an
(also 2, 4, 6, 8 usw).
2.)
Erweiterte 'nth-child-Selektoren':
Jetzt wird es noch variabler und effektiver. Hier im Beispiel die
Anweisungen für jeden
dritten
anzusprechenden Abschnitt.
'nth-child(3n+1)' spricht den ersten Abschnitt an
und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 1, Abschnitt 4, Abschnitt 7 usw. sind identisch.
'nth-child(3n+2)' ist für den zweiten
Abschnitt zuständig und ab diesen wird jeder dritte Abschnitt
angesprochen.
D.h. Abschnitt 2, Abschnitt 5, Abschnitt 8 usw. sind identisch.
'nth-child(3n+3)' spricht den dritten Abschnitt an
und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 3, Abschnitt 6, Abschnitt 9 usw. sind identisch.
'nth-child(3n+4)' spricht den vierten Abschnitt an
und ab diesen jeden dritten Abschnitt.
D.h. Abschnitt 4, Abschnitt 7, Abschnitt 10 usw. sind identisch.
Wie funktioniert es in diesem Template ?
Wir haben den '
nth-child-Selektor' für die
Abschnitte in der Datei
format.css angelegt. Und
zwar haben wir den 'nth-child-Selektor' auf unsere CSS-Klasse namens
'section-content' gesetzt und hierbei 'nth-child(odd/even)' verwendet.
<!-- Allgemeines Beispiel-->
.section-content:nth-child(odd) {
background:white;
color:#000;
}
.section-content:nth-child(even) {
background:black;
color:#fff;
}
So sieht
ein Abschnitt in der HTML-Datei aus:
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
So sehen
zwei Abschnitte in der HTML-Datei aus:
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 1 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
<!-- ABSCHNITT -->
<div class="section-content">
<div class="content">
... Inhalt Abschnitt 2 ...
</div>
</div>
<!-- E N D E ABSCHNITT -->
Sehr praktisch und übersichtlich: Der Code für die
Abschnitte ist also in der HTML-Datei immer der gleiche, egal wieviele
Abschnitte.
