Zählen mit CSS

Mit reinem CSS3 lassen sich Elemente durchzählen – eine Option die man beim erstellen einer Webseite nicht ausser Acht lassen sollte, wenn es z.B. darum geht Listen für mobil anzupassen.

Hierbei ist zu beachten, dass sich die Styles hier nicht auf das Elternelement basierend auf der Anzahl der Kindelemente anwenden lassen. Man kann jedoch mit CSS auf Kindelemente basierend auf der Anzahl ihrer Geschwister zugreifen.

So lassen sich z.B. Breiten anhand der Anzahl der Elemente innerhalb eine Liste festlegen, ohne dies umständlich durch JS berechnen zu müssen.

Im nachfolgenden Beispiel werden die Elemente einer Liste in der Breite verändert. In der Voreinstellung haben alle Listenelemente die Breite 33.3333%. Das sieht jedoch bei 5 Listenpunkten unschön aus, da zwei Elemente umbrechen. Hier wäre es wünschenswert wenn das erste und letzte Element jeweils 100% Breite einnehmen und dadurch eine 1-3-1 Darstellung erreicht wird.

HTML:

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
    <li>Element 5</li>
</ul>

CSS

ul {
    li {
        width: 33.33333%;
    }
}

Durch nachfolgendes CSS werden die Breiten des ersten und letzten Elements in der Liste angepasst, wenn diese fünf Listenpunkte enthält.

ul {
    > *:nth-last-child(n+5) ~ *:last-child,
    > *:nth-last-child(n+5):first-child {
        width: 100%;
    }
}

Sollte die Liste mehr oder weniger Einträge enthalten muss das CSS natürlich angepasst werden.

Ein weiterer Anwendungsfall wäre die Einschränkung einer langen Liste. Üblicherweise erledigen das viele per Javascript. Wenn man jedoch auch z.B. eine Animation bei der ersten Darstellung der Listenpunkte verzichten kann, ist folgendes CSS hilfreich:

.list .item {
    display: none;
}

.list .item:nth-child(-n+5){
    display:block;
}

Zunächst werden alle Einträge ausgeblendet. Der Selektor :nth-child(-n+5) setzt die ersten fünf Einträge wieder sichtbar.