Hallo einsiedler, bitte entschuldige meine Bemerkung zu ausgedruckten Sourcen. Ich wollte mich nicht lustig machen. Ich habe mir das jetzt auf tassilosturm.de angeschaut. Mir fällt auf, dass die Selektoren für die Icons nicht stimmen dürften. In der sturm-main-style.css steht: ~~~css,bad .treeitem + [aria-expanded="true"]::before { /* awesome */ } ~~~ und ich glaube, das willst Du nicht. Das Pluszeichen ist ein **Kombinator** ([siehe SelfWiki über Kombinatoren](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator)], d.h. es gibt an, dass dieser CSS Selektor sich auf zwei HTML Elemente bezieht deren Eigenschaften kombiniert zu betrachten sind. Im Falle von + ist es der Nachbarkombinator, d.h. dein CSS Selektor sucht ein Element mit Klasse treeitem, das ein Nachbarelement mit [aria-expanded="true"] hat. Für dieses Nachbarelement legst Du dann ein ::before-Pseudoelement fest. Bei Dir ist es aber so, dass der Button sowohl die Klasse treeitem trägt als auch das aria-expanded-Attribut hat. Und der Button soll das ::before-Pseudoelement bekommen. Du darfst also keinen Kombinator verwenden. Statt dessen musst Du alle Selektorteile direkt aneinander schreiben, auch eine Leerstelle muss vermieden werden (weil die ebenfalls ein Kombinator ist). Ich weiß aber nicht recht, ob das gut ist. Denn auch deine <li> tragen die treeitem-Klasse. Du musst genau aufpassen, was deine CSS Regeln tun, um keine Verwechslung zwischen li und button-Styling herbeizuführen. Da Du definitiv nur dem button ein ::before verpassen willst, solltest Du zumindest den Selektor um den Elementnamen erweitern (die Alternative wäre, sich nochmal alles anzuschauen und die treeitem-Klasse nur für eine Art von Elementen zu nutzen). ~~~css,good button.treeitem[aria-expanded="true"]::before ~~~ Was mir noch auffällt, ist ein Tippfehler in der CSS Datei: treeitemm**e**in vs treeitemm**a**in; offenbar ein ähnlicher Verlautungs-Irrtum wie bei button und botton. Ich weiß nicht, ob ich Dir hier helfen kann, aber vielleicht ist es nützlich, wenn Du Dir die Aussprache genau anhörst: „main“ klingt wie *mäin*, nicht wie *mein*, und „button“ klingt wie *battn*. Die Wörterbuch-Webseite LEO hat auch [Tonbeispiele](https://dict.leo.org/englisch-deutsch/main). _Rolf_ -- sumpsi - posui - clusi

Hallo einsiedler, bitte entschuldige meine Bemerkung zu ausgedruckten Sourcen. Ich wollte mich nicht lustig machen. Ich habe mir das jetzt auf tassilosturm.de angeschaut. Mir fällt auf, dass die Selektoren für die Icons nicht stimmen dürften. In der sturm-main-style.css steht: ~~~css,bad .treeitem + [aria-expanded="true"]::before { /* awesome */ } ~~~ und ich glaube, das willst Du nicht. Das Pluszeichen ist ein **Kombinator** ([siehe SelfWiki über Kombinatoren](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator)], d.h. es gibt an, dass dieser CSS Selektor sich auf zwei HTML Elemente bezieht deren Eigenschaften kombiniert zu betrachten sind. Im Falle von + ist es der Nachbarkombimator, d.h. dein CSS Selektor sucht ein Element mit Klasse treeitem, das ein Nachbarelement mit [aria-expanded="true"] hat. Für dieses Nachbarelement legst Du dann ein ::before-Pseudoelement fest. Bei Dir ist es aber so, dass der Button sowohl die Klasse treeitem trägt als auch das aria-expanded-Attribut hat. Du darfst also keinen Kombinator verwenden. Mit anderen Worten: Du musst alle Selektorteile direkt aneinander schreiben, auch eine Leerstelle muss vermieden werden (weil die ebenfalls ein Kombinator ist). Ich weiß aber nicht, ob das gut ist. Denn auch deine <li> tragen die treeitem-Klasse. Du musst genau aufpassen, was deine CSS Regeln tun, um keine Verwechslung zwischen li und button-Styling herbeizuführen. Da Du definitiv nur dem button ein ::before verpassen willst, solltest Du den Selektor um den Elementnamen erweitern (die Alternative wäre, sich nochmal alles anzuschauen und die treeitem-Klasse nur für eine Art von Elementen zu nutzen). ~~~css,good button.treeitem[aria-expanded="true"]::before ~~~ Was mir noch auffällt, ist ein Tippfehler in der CSS Datei: treeitemm**e**in vs treeitemm**a**in; offenbar ein ähnlicher Verlautungs-Irrtum wie bei button und botton. Ich weiß nicht, ob ich Dir hier helfen kann, aber vielleicht ist es nützlich, wenn Du Dir die Aussprache genau anhörst: „main“ klingt wie *mäin*, nicht wie *mein*, und „button“ klingt wie *battn*. Die Wörterbuch-Webseite LEO hat auch [Tonbeispiele](https://dict.leo.org/englisch-deutsch/main). _Rolf_ -- sumpsi - posui - clusi

Hallo einsiedler, bitte entschuldige meine Bemerkung zu ausgedruckten Sourcen. Ich wollte mich nicht lustig machen. Ich habe mir das jetzt auf tassilosturm.de angeschaut. Mir fällt auf, dass die Selektoren für die Icons nicht stimmen dürften. In der sturm-main-style.css steht: ~~~css,bad .treeitem + [aria-expanded="true"]::before { /* awesome */ } ~~~ und ich glaube, das willst Du nicht. Das Pluszeichen ist ein **Kombinator** ([siehe SelfWiki über Kombinatoren](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator)], d.h. es gibt an, dass dieser CSS Selektor sich auf zwei HTML Elemente bezieht deren Eigenschaften kombiniert zu betrachten sind. Bei Dir ist es aber so, dass der Button sowohl die Klasse treeitem trägt als auch das aria-expanded-Attribut hat. Du darfst also keinen Kombinator verwenden. Mit anderen Worten: Du musst alle Selektorteile direkt aneinander schreiben, auch eine Leerstelle muss vermieden werden (weil die ebenfalls ein Kombinator ist). ~~~css,good .treeitem[aria-expanded="true"]::before ~~~ _Rolf_ -- sumpsi - posui - clusi