einzelne Spoiler ansprechen

  • Hallo,

    kann man bei Bedarf einen WolLab-Spoiler(der im Editor eingebaut ist) einzeln per "id" im CSS ansprechen?

    Wir haben z.B. 12 Spoiler hintereinander eingebaut und möchten ein par davon verändern, färben, usw...

    Mit .spoilerBox spricht man ja alle an, aber das wollen wir ja nicht.

    Bzw. kann man den Spoiler duplizieren und nochmals in den Editor einbauen?

    So das der 2te mit z.B. .spoilerBox2 per CSS angesprochen wird.

    Würde mich freuen wenn das irgenwie machbar wäre.

    Lg Snash

  • Code
    div:nth-of-type(XXX) { ... }

    Wobei XXX für die Nummer des Spoilers steht. Nehmen wir also an, du hast 4 Spoiler:

    Spoiler anzeigen

    bla

    Spoiler anzeigen

    blubb

    Spoiler anzeigen

    spoiler

    Spoiler anzeigen

    lalala

    Und du möchtest nun den Button und den Inhalt des 3. davon einfärben:

    Code
    div:nth-of-type(3) {
        > .spoilerBoxHeader .button {
            background-color: #2a70a0;
        }
        
        > .spoilerBoxContent {
            background-color: #239dd9;
            color: #fff;
        }
    }

    Soll das aber nur Spoiler in einem speziellen Beitrag betreffen, musst du den Selektor noch weiter einschränken, also z.B. mittels article[data-post-id="YYY"] wobei YYY logischer Weise für die ID des Posts steht, in dem das passieren soll.

    Code
    <style>
    article[data-post-id="19732"] .messageText div:nth-of-type(4) > .spoilerBoxHeader .button {
         background-color: #2a70a0;
    }
    
    article[data-post-id="19732"] .messageText div:nth-of-type(4) > .spoilerBoxContent {
         background-color: #239dd9;
         color: #fff;
    }
    </style>

    Es gibt allerdings eine kleine Stolperfalle in dieser Lösung: nth-of-type kann man nicht an CSS-Klassen binden, d.h. von der o.g. CSS-Regel ist das 3. div-Element betroffen, unabhängig davon, ob es sich um einen Spoiler handelt, oder nicht. In CSS 3 gibt es keinen nth-of-class-Selektor, o.ä., d.h. wenn dir die CSS-Variante zu unflexibel ist, musst du auf JavaScript umsteigen:

    Code
    elByClass('spoilerBox')[2].querySelector('.spoilerBoxHeader .button').style.backgroundColor = '#2a70a0';
    elByClass('spoilerBox')[2].querySelector('.spoilerBoxContent').style.backgroundColor = '#239dd9';
    elByClass('spoilerBox')[2].querySelector('.spoilerBoxContent').style.backgroundColor = '#fff';

    Warum [2] und nicht [3], wenn ich den 3. Spoiler verändern möchte? Weil Arrays bei 0 anfangen und nicht bei 1.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!