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:
Damit werden aber alle Boxen rot. Was mache ich falsch?
Danke für eure Hilfe
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
Please also mark the comments that contributed to the solution of the article
Content-Key: 357267
Url: https://administrator.de/contentid/357267
Printed on: April 18, 2024 at 05:04 o'clock
2 Comments
Latest comment
Moin moin !
Innerhalb von
Die Verschachtelung sieht für mich folgendermaßen aus:
Die zweite Box wäre also
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
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="" 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
.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 */}
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;
}