ddizee
Dec 06, 2017
view1608
view2
0
Goto Top

Css rotating-boxes, Ansprechen einzelne Elemente

GermansolvedQuestionCSSDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 357267

Url: https://administrator.de/contentid/357267

Printed on: April 18, 2024 at 05:04 o'clock

2 Comments
Latest comment
Goto Top
Member: Arano
Solution Arano Dec 07, 2017 at 08:44:54 (UTC)
Goto Top
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
Mitglied: 134464
Solution 134464 Dec 07, 2017 updated at 11:45:42 (UTC)
Goto Top
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;
}
GermansolvedQuestionCSSDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment