Versionen dieses Beitrags

Auftrag für Bezahlung

Thepoeppel crop Rolf B
  • Auftrag für Bezahlung
  • 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.
  • 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. 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).
  • 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, 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).
  • 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

Auftrag für Bezahlung

Thepoeppel crop Rolf B
  • Auftrag für Bezahlung
  • 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
  • .treeitem[aria-expanded="true"]::before
  • 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