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

0 30

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

MB
  • css
  • html
  • technik
  1. 1
    Gunnar Bittersmann
    • css
    • html
    1. 0
      MB
      1. 0
        Gunnar Bittersmann
        1. 0
          MB
          1. 1
            Gunnar Bittersmann
            • html
  2. 0

    Spezifischeres Beispie!

    MB
    1. 0
      Gunnar Bittersmann
      • css
      • html
      1. 0
        MB
        1. 0
          Gunnar Bittersmann
          1. 1
            Rolf B
            1. 0
              Gunnar Bittersmann
              • css
              1. 1
                Rolf B
                1. 0
                  Gunnar Bittersmann
            2. 0
              Gunnar Bittersmann
              • css
            3. 0
              MB
              1. 0
                Gunnar Bittersmann
                • css
                1. 0
                  MB
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      MB
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          MB
                          1. 1
                            Rolf B
              2. 1
                Rolf B
                1. 0
                  MB
          2. 0
            MB
      2. 0
        Felix Riesterer
        1. 0
          Gunnar Bittersmann
          • css
  3. 0
    Gunnar Bittersmann
    • begriff
    • css
    1. 0
      MB
SELF-Forum

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

MB (Versionen)
– Informationen zu den Bewertungsregeln

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

akzeptierte Antworten

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

    Gunnar Bittersmann Homepage des Autors (Versionen)
    +1 Informationen zu den Bewertungsregeln

    @@MB

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

    Warum?? Das geht aus deinem Beispiel nicht hervor. Warum hat nicht das innere span die Unterstreichung?

    .url_common { text-decoration-line: underline }

    Entweder du denkst zu kompliziert oder dein hier geliefertes Beispiel ist untauglich.

        <span class="link">
      <span class="url_special">TEXT</span>
    </span>
    <span class="link">
      <span class="url_common">TEXT</span>
    </span>

    Das sollen jetzt aber keine Links werden, die mit JavaScript clickbar gemacht werden, oder?

    🖖 Живіть довго і процвітайте

    --
    Ad astra per aspera
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

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

      MB (Versionen)
      – Informationen zu den Bewertungsregeln

      moin,

      Warum?? Das geht aus deinem Beispiel nicht hervor. Warum hat nicht das innere span die Unterstreichung?

      In meinem Beispiel können ALLE .links entwerder einen underline-value haben oder nicht, unabhängig davon welche Klassen die Child-Elemente der .links haben. Ich möchte NUR einen Teil der .links underline-values entfernen, welches die Klasse.url_special im Child-Element von beinhaltet.

      Es geht mir ausschließlich um eine Änderung eines CSS-Property von einem Teil der Parent-Elemente, welches von anderen Parent-Elementen selbst nicht unterschieden werden kann, jedoch aber von seinen Child-Elementen eben .link.url_special und .link.url_common

      Natürlich könnte ich auch mit den Klassen foo.bar und .foo.quz mit dem Property background-color, welches z.B. von red auf green wechselt, als mein Beispiel anführen. Aber so ist mein Problem klarer - hoffe ich 🙏. An meinem Beispiel ändert sicht nichts.

      Das sollen jetzt aber keine Links werden, die mit JavaScript clickbar gemacht werden, oder?

      Natürlich, aber die Link-Referenz ist App-Intern. Als User hat man darauf keinen Zugriff ohne Community-Plugins.

      lgmb

      PS: Ich denke, es wäre besser gewesen, wenn ich nur das relevante css- & html-Snippet als Beispiel angeführt hätte und nicht den gesamten code oder? Wenn dem so sei, bitte entschuldige…

      --
      Sprachstörung
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@MB

        Warum?? Das geht aus deinem Beispiel nicht hervor. Warum hat nicht das innere span die Unterstreichung?

        In meinem Beispiel können ALLE .links entwerder einen underline-value haben oder nicht, unabhängig davon welche Klassen die Child-Elemente der .links haben.

        Und wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

        Das sollen jetzt aber keine Links werden, die mit JavaScript clickbar gemacht werden, oder?

        Natürlich, aber die Link-Referenz ist App-Intern.

        Natürlich. Mal wieder Entwickler am Werk, die von grundlegenden Webtechnologien (wie HTML eine ist) nicht die geringste Ahnung haben. 😫

        🖖 Живіть довго і процвітайте

        --
        Ad astra per aspera
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

          MB
          – Informationen zu den Bewertungsregeln

          moin,

          Und wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

          Ich hab oben in mein Beispiel alles an html & css rausgeschmissen, was IMO unwichtig ist Spezifisches Beispiel!.

          Natürlich. Mal wieder Entwickler am Werk, die von grundlegenden Webtechnologien (wie HTML eine ist) nicht die geringste Ahnung haben. 😫

          Naja, du magst als Profi schon Recht haben - ich kann da nicht mit reden, aber in dieser App is noch so viel anderes Zeugs, was gerendert werden muss. Da ist die HTML-Performence, welches sehr viele Fehler verzeiht, IMO geringfühgig und nebensächlich. Die Prios liegen woanders.

          lgmb

          --
          Sprachstörung
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

            Gunnar Bittersmann Homepage des Autors
            +1 Informationen zu den Bewertungsregeln

            @@MB

            Und wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

            Ich hab oben in mein Beispiel alles an html & css rausgeschmissen, was IMO unwichtig ist Spezifisches Beispiel!.

            Dazu hatte ich ja schon geschrieben, dass das meine Frage nicht beabtwortet.

            Natürlich. Mal wieder Entwickler am Werk, die von grundlegenden Webtechnologien (wie HTML eine ist) nicht die geringste Ahnung haben. 😫

            in dieser App is noch so viel anderes Zeugs, was gerendert werden muss. Da ist die HTML-Performence, welches sehr viele Fehler verzeiht, IMO geringfühgig und nebensächlich.

            Es geht nicht um Performance, sondern um Bedienbarkeit.

            Ein <span onclick="…"> ist nicht bedienbar. Für manche (Maus-Nutzer) ist es das; für andere (Tastatur-Nutzer) ist es das nicht. Zusammengefasst also: nicht bedienbar.

            Man könnte es mit einigem Aufwand bedienbar machen: tabindex="1" und role="link" fallen mir da ein. Möglich, dass das noch nicht reicht. Man sollte das aber nicht tun, sondern <a href="…"> verwenden. Wenn es sich denn um einen Link, d.h. einen Verweis zu einer anderen Stelle im Web, handelt.

            Für Aktionen auf einer Seite ist <a href="#" onclick="…"> falsch; dazu sind <button>s da.

            🖖 Живіть довго і процвітайте

            --
            Ad astra per aspera
            Beitrag melden
            +1
            Informationen zu den Bewertungsregeln

  2. Spezifischeres Beispie!

    MB
    – Informationen zu den Bewertungsregeln

    moin,

    Beispiel mit Chrome mit :has:

    /* .link Parent-Element */
.link {
  text-decoration-line: underline
}

/* .link Child-Elements */
.link .url_common {}
.link .url_special {}

/* Änderung */
.link:has( [class="url_special"] ) {
  text-decoration-line: none !important;
}


    <!-- unveränderter -->
<span class="link">
  <span class="url_common">TEXT</span>
</span>

    <!-- verändert -->
<span class="link">
  <span class="url_special">TEXT</span>
</span>

    lgmb

    --
    Sprachstörung
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Spezifischeres Beispie!

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@MB

      Beispiel mit Chrome mit :has:

      Deine Lösung hilft hier nicht weiter, wenn wir das Problem nicht kennen. Dazu müsstest du schon meine Frage beantworten.

      .link:has( [class="url_special"] ) {

      Warum verwendest du hier einen Attributselektor anstatt einen Klassenselektor?

      (Von meiner Neugier abgesehen ist der Attributselektor möglicherweise falsch.)

      🖖 Живіть довго і процвітайте

      --
      Ad astra per aspera
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Spezifischeres Beispie!

        MB
        – Informationen zu den Bewertungsregeln

        moin,

        Deine Lösung hilft hier nicht weiter, wenn wir das Problem nicht kennen.

        Das Problem habe ich doch in mehrfacher Form beschrieben...?

        Dazu müsstest du schon meine Frage beantworten.

        Sry, ich hab die Frage nicht ganz verstanden oder gehofft sie verstanden zu haben.

        .link:has( [class="url_special"] ) {

        Warum verwendest du hier einen Attributselektor anstatt einen Klassenselektor?

        Ok, das hätte ich auch noch ändern sollen. Welches Property spielt keine Rolle. Wichtig ist hier nur, dass es ein Property ist, welches verändert werden soll.

        lgmb

        --
        Sprachstörung
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Spezifischeres Beispie!

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@MB

          Das Problem habe ich doch in mehrfacher Form beschrieben...?

          Nicht umfassend genug.

          Dazu müsstest du schon meine Frage beantworten.

          Sry, ich hab die Frage nicht ganz verstanden oder gehofft sie verstanden zu haben.

          Ähm, die Frage war nicht gemeint:

          Warum verwendest du hier einen Attributselektor anstatt einen Klassenselektor?

          sondern:

          Wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Spezifischeres Beispie!

            Rolf B
            +1 Informationen zu den Bewertungsregeln

            Hallo Gunnar,

            Wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

            Ich verstehe deine Frage allerdings auch nicht.

            .link {
   text-decoration-line: underline;
}

            wäre doch die Antwort. Oder hast Du irgendwas entdeckt, das diese Regel zum Nichtfunktionieren bringen sollte?

            Und das Problem, das ich hier herauslese, heißt: Obsidian. Diese Anwendung generiert Markup auf eine recht störrische und unbrauchbare Weise, MB will aber aus Gründen unbedingt damit arbeiten und sucht nun CSS-Wege, in bestimmten Szenarien die Darstellung zu beeinflussen.

            Um deinen anfänglichen Hinweis nochmal aufzugreifen:

            .link .url_common {
   text-decoration-line: underline;
}

            sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

            Ich mutmaße mal, dass dieser <span class="link"> ebenfalls von Obsidian vorgegeben ist und nicht von MB beeinflusst werden kann. Oder mutmaße ich da falsch?

            Rolf

            --
            sumpsi - posui - obstruxi
            Beitrag melden
            +1
            Informationen zu den Bewertungsregeln

            1. Spezifischeres Beispie!

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              @@Rolf B

              Wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

              Ich verstehe deine Frage allerdings auch nicht.

              .link {
   text-decoration-line: underline;
}

              wäre doch die Antwort.

              Das erklärt, wie .link-Elemente zu der Unterstreichung kommen. Es erklärt nicht, wie sie nicht zu der Unterstreichung kommen.

              @MB schrieb: „In meinem Beispiel können ALLE .links entwerder einen underline-value haben oder nicht.“

              Das hatte ich vielleicht falsch gedeutet, dass für manche .links text-decoration-line: underline gesetzt ist, für andere aber nicht?

              🖖 Живіть довго і процвітайте

              --
              Ad astra per aspera
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Spezifischeres Beispie!

                Rolf B
                +1 Informationen zu den Bewertungsregeln

                Hallo Gunnar,

                @MB schrieb: „In meinem Beispiel können ALLE .links entwerder einen underline-value haben oder nicht.“

                Er schrub vollständiger:

                In meinem Beispiel können ALLE .links entwerder einen underline-value haben oder nicht, unabhängig davon welche Klassen die Child-Elemente der .links haben. Ich möchte NUR einen Teil der .links underline-values entfernen, welches die Klasse.url_special im Child-Element von beinhaltet.

                Das, was er möchte, kriegt er in Chrome mit :has() gelöst. Aber in Obsidian nicht, weil da die :has()in noch nicht läufig ist. Oder so ähnlich...

                Und weil er das ohne :has und ohne JS nicht hinbekommen wird, muss er wohl mal erklären, wieso zum Geier das direkte Formatieren vom .url_normal Span nicht funktioniert.

                Rolf

                --
                sumpsi - posui - obstruxi
                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln

                1. Spezifischeres Beispie!

                  Gunnar Bittersmann Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  @@Rolf B

                  Und weil er das ohne :has und ohne JS nicht hinbekommen wird, muss er wohl mal erklären, wieso zum Geier das direkte Formatieren vom .url_normal Span nicht funktioniert.

                  … und was die Links, die nicht unterstrichen werden sollen, von denen unterscheidet, die unterstrichen bleiben sollen

                  Womöglich gibt es ja da außer den angepappten Klassen noch andere Unterschiede, die man im Stylesheet nutzen kann. Wo (in welchen Elementen) sie auf der Seite vorkommen bspw.

                  🖖 Живіть довго і процвітайте

                  --
                  Ad astra per aspera
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

            2. Spezifischeres Beispie!

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              @@Rolf B

              Um deinen anfänglichen Hinweis nochmal aufzugreifen:

              .link .url_common {
   text-decoration-line: underline;
}

              sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

              Eben. Wie ich sagte.

              Den Selektor muss man auch nicht spezifischer machen als nötig. .link darin kann wohl weg.

              🖖 Живіть довго і процвітайте

              --
              Ad astra per aspera
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

            3. Spezifischeres Beispie!

              MB (Versionen)
              – Informationen zu den Bewertungsregeln

              moin,

              […] Diese Anwendung generiert Markup auf eine recht störrische und unbrauchbare Weise,[…]

              👍

              .link .url_common {
   text-decoration-line: underline;
}

              Ich möchte nur, dass sich das Property von einem Teil der .link-Elemente ändert, welches ein Child-Element mit der Klasse .url_special enthält. Ich rede nicht von Child-Elementen selbst. Nicht von .url_common oder von .url_special.

              Mit .link .url_common oder .link .url_special modifiziert man ja nur das Child-Element selbst eben .url_common oder .url_special, aber nicht das Parent-Element .link.

              Wenn z.B. beide .link .url_common oder .link .url_special das Property text-decoration-line mit dem Value none mit !important besitzen, ist das Parent-Element immer noch unbeeinflusst, welches immer noch das Property text-decoration-line: underline hat.

              Wenn ich das Property vom .link selbst ändere, dann änderen sich komplett alle Elemente mit dem Namen .link und nicht einen Teil. Mit .link:has( [class="url_special"] ) in Chrome ist es einfach, aber nicht in Firefox welches das Property noch nicht implementiert hat 😕.

              Deswegen Frage ich euch ja auch nach alternative.

              sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

              Leider nicht

              Ich mutmaße mal, dass dieser <span class="link"> ebenfalls von Obsidian vorgegeben ist und nicht von MB beeinflusst werden kann. Oder mutmaße ich da falsch?

              So ist es.

              lgmb

              --
              Sprachstörung
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Spezifischeres Beispie!

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@MB

                Ich möchte nur, dass sich das Property von einem Teil der .link-Elemente ändert, welches ein Child-Element mit der Klasse .url_special enthält.

                Warum denn?

                Ich rede nicht von Child-Elementen selbst. Nicht von .url_common oder von .url_special.

                Wir aber. Warum redest du nicht mit uns?

                Entweder du hast meine Antwort auch nach Rolfs Wiederholung noch nicht verstanden oder wir haben dein Problem noch nicht verstanden. (Dein Problem, nicht deinen Lösungsweg.)

                Wenn z.B. beide .link .url_common oder .link .url_special das Property text-decoration-line mit dem Value none mit !important besitzen, ist das Parent-Element immer noch unbeeinflusst, welches immer noch das Property text-decoration-line: underline hat.

                Das kannst du ja falls erforderlich auf none setzen. Oder besser auf revert, das spart die Überlegung, ob wie der Wert bei der betreffenden Eigenschaft nun lauten muss.

                Wenn ich das Property vom .link selbst ändere, dann änderen sich komplett alle Elemente mit dem Namen .link

                Und das wäre schlimm, weil?

                sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

                Leider nicht

                Warum nicht? Was hast du gegen diesen Vorschlag?

                🖖 Живіть довго і процвітайте

                --
                Ad astra per aspera
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Spezifischeres Beispie!

                  MB
                  – Informationen zu den Bewertungsregeln

                  moin,

                  Ich möchte nur, dass sich das Property von einem Teil der .link-Elemente ändert, welches ein Child-Element mit der Klasse .url_special enthält.

                  Warum denn?

                  Dadurch ist der Lesefluss für mich besser, mit dem Ziel: "Möglichst wenig unterschied vom eigentlichen Text", damit mein Auge nicht an den Links hängen bleibt. Meine Notizen lassen sich wirklich so besser lesen.

                  […]

                  Wir aber. Warum redest du nicht mit uns?

                  Ich glaube wir reden aneinander vorbei.

                  Entweder du hast meine Antwort auch nach Rolfs Wiederholung noch nicht verstanden oder wir haben dein Problem noch nicht verstanden. (Dein Problem, nicht deinen Lösungsweg.)

                  Ja man, scheint mir so 😕.

                  Wenn z.B. beide .link .url_common oder .link .url_special das Property text-decoration-line mit dem Value none mit !important besitzen, ist das Parent-Element immer noch unbeeinflusst, welches immer noch das Property text-decoration-line: underline hat.

                  Das kannst du ja falls erforderlich auf none setzen. Oder besser auf revert, das spart die Überlegung, ob wie der Wert bei der betreffenden Eigenschaft nun lauten muss.

                  🤔 danke für deinen Hinweis. Ich durch forste mal selfhtml…

                  Wenn ich das Property vom .link selbst ändere, dann änderen sich komplett alle Elemente mit dem Namen .link

                  Und das wäre schlimm, weil?

                  ja wäre es.

                  sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

                  Leider nicht

                  Warum nicht?

                  habe ich oben beschrieben.

                  lgmb

                  --
                  Sprachstörung
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Spezifischeres Beispie!

                    Gunnar Bittersmann Homepage des Autors
                    – Informationen zu den Bewertungsregeln

                    @@MB

                    Ich möchte nur, dass sich das Property von einem Teil der .link-Elemente ändert, welches ein Child-Element mit der Klasse .url_special enthält.

                    Warum denn?

                    Dadurch ist der Lesefluss für mich besser

                    Die Frage bezog sich nicht auf dein Ziel, sondern warum du das technisch so umzusetzen gedenkst.

                    Wir aber. Warum redest du nicht mit uns?

                    Ich glaube wir reden aneinander vorbei.

                    Ja. Wenn das so weitergeht, komme ich doch noch schneller als erwartet auf 50000.

                    Wenn ich das Property vom .link selbst ändere, dann änderen sich komplett alle Elemente mit dem Namen .link

                    Und das wäre schlimm, weil?

                    ja wäre es.

                    Ich fragte nicht nach dem Ob, sondern nach dem Weil.

                    sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

                    Leider nicht

                    Warum nicht?

                    habe ich oben beschrieben.

                    Nein.

                    🖖 Живіть довго і процвітайте

                    --
                    Ad astra per aspera
                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

                    1. Spezifischeres Beispie!

                      MB
                      – Informationen zu den Bewertungsregeln

                      moin,

                      Dadurch ist der Lesefluss für mich besser

                      Die Frage bezog sich nicht auf dein Ziel, sondern warum du das technisch so umzusetzen gedenkst.

                      Durch die Vorgabe und Beschränkungen von Obsidian.

                      Wir aber. Warum redest du nicht mit uns?

                      Ich glaube wir reden aneinander vorbei.

                      Ja. Wenn das so weitergeht, komme ich doch noch schneller als erwartet auf 50000.

                      😂 ja schein mir so

                      Wenn ich das Property vom .link selbst ändere, dann änderen sich komplett alle Elemente mit dem Namen .link

                      Und das wäre schlimm, weil?

                      ja wäre es.

                      Ich fragte nicht nach dem Ob, sondern nach dem Weil.

                      Sry. um die Links zu differenzieren

                      sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

                      Leider nicht

                      Warum nicht?

                      habe ich oben beschrieben.

                      Nein.

                      @@Rolf B hat meine Frage hier beantwortet 😀👍.

                      @Rolf B Aber wenn Du ein Element basierend auf Eigenschaften seiner Kind-Elemente stylen willst, dann kommst Du an :has oder JavaScript nicht vorbei.

                      lgmb

                      --
                      Sprachstörung
                      Beitrag melden
                      –
                      Informationen zu den Bewertungsregeln

                      1. Spezifischeres Beispie!

                        Gunnar Bittersmann Homepage des Autors
                        – Informationen zu den Bewertungsregeln

                        @@MB

                        @@Rolf B hat meine Frage hier beantwortet 😀👍.

                        Hatte ich das nicht Stunden vorher auch schon?

                        Nur dass ich „dann ist es – bis auf eine Prise Whitespace – komplett schnurz, ob der innere oder oder der äußere Span unterstrichen wird“ als Frage formuliert habe: „Warum hat nicht das innere span die Unterstreichung?“

                        Daraufhin solltest du triftige Gründe dagegen anführen oder, wenn du keine solchen anbringen kannst, erkennen, dass es schnurz ist, ob das innere oder oder das äußere span unterstrichen wird. Außer dass die eine Variante auch ohne :has() umzusetzen ist.

                        @Rolf B Aber wenn Du ein Element basierend auf Eigenschaften seiner Kind-Elemente stylen willst, dann kommst Du an :has oder JavaScript nicht vorbei.

                        Das ist nun eine Binsenweisheit: Wenn sich alles, was mit :has() möglich ist, auch anders möglich wäre, dann hätte man ja :has() nicht einführen müssen.

                        🖖 Живіть довго і процвітайте

                        --
                        Ad astra per aspera
                        Beitrag melden
                        –
                        Informationen zu den Bewertungsregeln

                        1. Spezifischeres Beispie!

                          MB
                          – Informationen zu den Bewertungsregeln

                          moin,

                          Hatte ich das nicht Stunden vorher auch schon?

                          dann erschloss sich mir deine Frage nicht und nach einem wiederholten lesen, immer noch nicht, sry 😕.

                          […] Wenn sich alles, was mit :has() möglich ist, auch anders möglich wäre, dann hätte man ja :has() nicht einführen müssen.

                          Korrekt.

                          Schönen abend.

                          lgmb

                          --
                          Sprachstörung
                          Beitrag melden
                          –
                          Informationen zu den Bewertungsregeln

                          1. Spezifischeres Beispie!

                            Rolf B
                            +1 Informationen zu den Bewertungsregeln

                            Hallo MB,

                            dann erschloss sich mir deine Frage nicht und nach einem wiederholten lesen, immer noch nicht, sry 😕.

                            Tatsächlich hat Gunnar den gleichen Vorschlag gemacht wie ich, nur mit weniger Kontext zu deiner Situation. Und möglicherweise hast Du den gebraucht.

                            Oder einfach nur die klare Ansage: GEHT NICHT ANDERS 😉

                            Rolf

                            --
                            sumpsi - posui - obstruxi
                            Beitrag melden
                            +1
                            Informationen zu den Bewertungsregeln

              2. Spezifischeres Beispie!

                Rolf B
                +1 Informationen zu den Bewertungsregeln

                Hallo MB,

                sollte eigentlich die Lösung sein, das braucht kein :has und styled nur den span im Link.

                Leider nicht

                Doch. Oh. Wie?

                Wenn Du dieses HTML hast:

                <span class="link">
  <span class="url_normal">Klick mich, ich bin der Mausling</span>
</span>

                dann ist es – bis auf eine Prise Whitespace – komplett schnurz, ob der innere oder oder der äußere Span unterstrichen wird.

                Und deswegen sollte

                .link .url_normal {
   text-decoration-line: underline;
}

                prima funktionieren. Ob die Angabe von .link im Selektor überspezifiziert ist oder nicht, hängt davon ab, ob .url_normal auch außerhalb von .link Elementen vorkommen kann.

                Wenn das „nicht funktioniert“, dann solltest Du erklären, wo hierbei das Problem ist. Denn Du hast wohl keine Alternative. :has() ist im aktuellen Fuchs noch nicht per Default aktiv, ab wann es im Obsidian-Browser vorkommt, ist noch eine weitere Frage. Aber wenn Du ein Element basierend auf Eigenschaften seiner Kind-Elemente stylen willst, dann kommst Du an :has oder JavaScript nicht vorbei. Möglicherweise beißen sich deine Styles mit denen von Obsidian (das legt dein !important-Nuke nahe) und dann müsste man schauen, wie man hier geschickt mit Spezifität vorgeht.

                Rolf

                --
                sumpsi - posui - obstruxi
                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln

                1. Spezifischeres Beispie!

                  MB
                  – Informationen zu den Bewertungsregeln

                  moin,

                  […]. Aber wenn Du ein Element basierend auf Eigenschaften seiner Kind-Elemente stylen willst, dann kommst Du an :has oder JavaScript nicht vorbei.

                  Vielen herzlichen Dank für deine AW!!!

                  Schönen sonntagabend wüche ich euch allen 🖐️😃.

                  lgmb

                  --
                  Sprachstörung
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

          2. Spezifischeres Beispie!

            MB
            – Informationen zu den Bewertungsregeln

            moin,

            Ähm, die Frage war nicht gemeint: […] sondern

            Genau, ich beziehe mich genau auf deine Frage, die mir von der Frage her nicht klar ist.

            Wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung? Hängt da noch eine Klasse dran, die das regelt?

            Bitte beschreibe deine Frage an mich klarer und genauer. Zur klären wäre…

            1. Frage
            • Frage: "Wie kommen bzw. kommen nicht die .link-Elemente zu der Unterstreichung[…]"
            • Antwort: Ich habe die Frage nicht verstanden.
            1. Frage (von mir verändert)
            • Frage: "Wie kommen […] die .link-Elemente zu der Unterstreichung[…]"
            • Antwort: Durch das Property text-decoration-line: underline im .link-Elemente
            1. Frage (von mir verändert)
            • Frage: "Wie […] kommen nicht die .link-Elemente zu der Unterstreichung[…]"
            • Antwort: ich habe die Frage nicht verstanden.
            1. Frage (Satzkonstrukt von mir verändert)
            • Frage: "Wie kommen die .link-Elemente nicht zu der Unterstreichung[…]"
            • Antwort: Durch die Selektoren .link:has( [class="url_special] ) mit dem Property text-decoration-line: none !important
            1. Frage
            • Frage: […] Hängt da noch eine Klasse dran, die das regelt?
            • Frage: Ja, die .url_special nach .link

            All das habe ich doch beschrieben oder nicht, fals das die Fragen waren, die ich herauskristallisiert habe.

            sry, wegen der Umstände. Ich raffe die Frage einfach nicht.

            lgmb

            --
            Sprachstörung
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

      2. Spezifischeres Beispie!

        Felix Riesterer Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Lieber Gunnar,

        .link:has( [class="url_special"] ) {

        Warum verwendest du hier einen Attributselektor anstatt einen Klassenselektor?

        (Von meiner Neugier abgesehen ist der Attributselektor möglicherweise falsch.)

        da musste ich jetzt erst einmal überlegen, wann dieser Selektor falsch sein könnte. Ich glaube, ich habe verstanden, was Du da meinst:

        <p class="info wichtig">Aufpassen!</p>

        Mit diesem Markup wäre ein Selektor [class="wichtig"] definitiv falsch. Das ist ja am class-Attribut das Verrückte (will meinen: Vielseitige), dass mehrere durch Leerzeichen getrennte Werte unterschiedliche Klassenzugehörigkeiten ausdrücken können. Der Attributselektor erwartet eine Zeichenkette genau so. Die Klassenzugehörigkeit wäre aber in gleichem Maße gegeben, wenn da <p class="wichtig info"> gestanden hätte, nur dass ein Attributselektor [class="info wichtig"] dann natürlich scheitern muss.

        Liebe Grüße

        Felix Riesterer

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Spezifischeres Beispie!

          Gunnar Bittersmann Homepage des Autors (Versionen)
          – Informationen zu den Bewertungsregeln

          @@Felix Riesterer

          da musste ich jetzt erst einmal überlegen, wann dieser Selektor falsch sein könnte. Ich glaube, ich habe verstanden, was Du da meinst

          Ja, hast du.

          Es könnte ja sein, dass bei <span class="url_special"> noch weitere Klassen dazukommen; dann greift der Selektor [class="url_special"] nicht mehr.

          @MB mag jetzt sagen, dass der Fall nie eintreten wird. Wird er dann wohl morgen auch nicht. Aber übermorgen.

          Das ist ja am class-Attribut das Verrückte (will meinen: Vielseitige), dass mehrere durch Leerzeichen getrennte Werte unterschiedliche Klassenzugehörigkeiten ausdrücken können. Der Attributselektor erwartet eine Zeichenkette genau so.

          Wenn da = zwischen Attributbezeichner und Wert steht, dann ja. Aber da kann ja auch was anderes dazwischen stehen; zum Bleistift ~=.

          Ein Klassenselektor .foo ist nichts anderes als eine Kurzschreibweise für [class~="foo"]. (Jedenfalls aus CSS-Sicht nicht.)

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@MB

    die CSS-Property :has

    Nein, :has ist keine property (Eigenschaft), sondern eine Pseudoklasse.

    Properties sind das, was in Regeln ({}-Blöcken) links vom : steht.

    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.

    Die App hat einen kompletten Browser integriert anstatt die auf dem Gerät vorhandene Rendering-Engine (Webkit bzw. Chromium) zu nutzen?

    🖖 Живіть довго і процвітайте

    --
    Ad astra per aspera
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      MB
      – Informationen zu den Bewertungsregeln

      moin,

      @@MB

      die CSS-Property :has

      Nein, :has ist keine property (Eigenschaft), sondern eine Pseudoklasse.

      Sry, meine ich. Dank

      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.

      Die App hat einen kompletten Browser integriert anstatt die auf dem Gerät vorhandene Rendering-Engine (Webkit bzw. Chromium) zu nutzen?

      Gute Frage. Noch bin ich nicht so tief drinnen, wie ich gerne sein würde, weil ich mich mit den CSS-Snippets für die App rumschlagen will, um für mich die Lesbarkeit der Notizen zu erhöhen.

      lgmb

      --
      Sprachstörung
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln