CSS für überlappende Spielkarten

[Camping_RIDER]

Aloha ;)

Mit "Brute-Force", mal so aus der Hüfte geschossen:

div.card {
   postition: absolute;
   top: 20pt;
}

div.card + div.card {
   postition: absolute;
   top: 40pt;
}

div.card + div.card + div.card {
   postition: absolute;
   top: 60pt;
}

Das erfüllt die Anforderung einer variablen Anzahl an li-Elementen nicht. Abgesehen davon hast du dir offenbar das gegebene Beispiel-Markup nicht angeschaut - eine für das Beispielmarkup geeignete "statische" CSS-Lösung wäre hier:

li {
  margin-left:60px;
}

li ~ li {
  margin-left:40px;
}

li ~ li ~ li {
  margin-left:20px;
}

li ~ li ~ li ~ li {
  margin-left:0px;
}

...aber auch das erfüllt wie gesagt die Anforderungen an die Flexibilität nicht.

Da gibt es bestimmt auch eine Möglichkeit mit nth-child().

Ich habe eine gesucht, hab aber leider (noch) keine gefunden.

Kann man mit CSS eigentlich abfragen, um das wievielte Kind eines Elternelementes es sich handelt?

Meine kurze Recherche legt nahe, dass sowas mit CSS alleine nicht möglich ist - zumindest nicht insofern, dass man den "Index" gleich automatisiert in einen CSS-value verwursten könnte.

Grüße,

RIDER