Css rotating-boxes, Ansprechen einzelne Elemente

Hallo alle zusammen,

ich habe eine Frage und zwar:

ich habe 6 drehenden Boxen (s. Beispiel-Link)

Hier könnt ihr diese Boxen angucken:
https://demo.rocksolidthemes.com/contao/tao/feature-boxes

Ich möchte alle diese Boxen einzeln ansprechen, um unterschiedliche Hintergrundfarben zu vergeben.

z.B. ich möchte Box Nummer 2 ansprechen. Mein Vorgehen:

.rotating-boxes-item .rotating-boxes-item-cover span:nth-of-type(2) {background-color: red;}

Damit werden aber alle Boxen rot. Was mache ich falsch?

Danke für eure Hilfe

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 357267

Url: https://administrator.de/forum/css-rotating-boxes-ansprechen-einzelne-elemente-357267.html

Ausgedruckt am: 12.04.2025 um 04:04 Uhr

2 Kommentare

Neuester Kommentar

Moin moin !

Innerhalb von .rotating-boxes-item-cover gibt es doch nichts, wie willst du da auf ein Kindelement zugreifen !?

<span class="rotating-boxes-item-cover" data-icon="&#xe0f9;" data-headline="Dokumentation"></span>  

Die Verschachtelung sieht für mich folgendermaßen aus:

selection.rotatin-boxes
    a.rotating-boxes-item
        span.rotating-boxes-item-cover
        div.rotating-boxes-item-content

Die zweite Box wäre also

.rotating-boxes a.rotating-boxes-item:nth-of-type(2) .rotating-boxes-item-cover { /* style fürs Cover */}
.rotating-boxes a.rotating-boxes-item:nth-of-type(2) .rotating-boxes-item-content { /* style fürs Inhalt */}

Oder ähnlich, ich müsste jetzt selber Probieren.

Vielleicht ist es einfacher den Boxe (a-Tags) eine Id mitzugeben: box,1 box2, box3, ...
Dann wäre der Zugriff über das CSS einfacher und verständlicher

~Arano

Folgendes funktioniert hier, getestet.

a.rotating-boxes-item:nth-child(2) .rotating-boxes-item-cover, a.rotating-boxes-item:nth-child(2) .rotating-boxes-item-content{
  background-color: red !important;
}