Avatar

einzelne Spoiler ansprechen

You may notice, that many sections are currently only available in german. We are working hard to provide a full translation of our website, but this might take some time. Thank you for understanding.
  • 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:



    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.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!