CSS für überlappende Spielkarten

[TS]

Hello,

Ich habe eine Liste an Karten und möchte die so darstellen, dass die sich etwas versetzt voneinander überlappen.

In verlinktem Beispiel habe ich das im ersten <ul> mit inline-styles gemacht, dass es so aussieht wie ich will.

Gibt es dafür eine Lösung ohne inline-styles?

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;
}

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

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

Liebe Grüße
Tom S.