Wie in Firefox bestimmte Eltern-Elemente ansprechen / nur mit CSS / ohne CSS Property :has von MB, 22.10.2023 14:29

Wie in Firefox bestimmte Eltern-Elemente ansprechen / nur mit CSS / ohne CSS Property :has

MB 22.10.2023 14:29 (Versionen)

moin,

und guten Sonntag ✋😀,

Meine Absicht
Ich möchte die Anzeige eines Parent-Elementes (evtl. mit Pseudo-Klassen) NUR mit CSS verändern (bzw. um-stylen).

Was ich gemacht habe
Mit dem Chome-Browser, welches die CSS-Property :has implementiert hat, ist es sehr einfach.

Beispiel mit Chrome:

<!DOCTYPE html>
  <head>
    <style>
      .link {
        text-decoration-line: underline
      }
      .link:has( [class="url_special"] ) {
        text-decoration-line: none !important;
      }
      .url_special {}
      .url_common {}
    </style>
  </head>
  <body>
    <span class="link">
      <span class="url_special">TEXT</span>
    </span>
    <span class="link">
      <span class="url_common">TEXT</span>
    </span>
  </body>
</html>

Mein Problem
Der aktuelle Firefox-Browser hat die CSS-Property :has leider NICHT implementiert.

@supports not selector(:has)

Jedoch möchte ich dieses beschriebene umstylen auf diesem Browser erreichen.

Meine Frage
kann man ohne CSS-Property :has mein Problem anderweitig lösen???

Warum ich Frage
Ich frage für die Note-Taking App Obsidian. Die App stellt CSS-Snippets zur Verfügung, um sie zu stylen und basiert vermutlich auf Firefox. Daher kennt die App :has nicht. Ohne Community-Plugins verbietet die App JavaScript. Ich hatte die App Obsidian kurz zuvor hier Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? beschrieben.

Ich freue mich auf AWs 😃.

lgmb

--
Sprachstörung

Beitrag melden

– Informationen zu den Bewertungsregeln