Kann man mit CSS ein Element "rückwirkend" ansprechen?

    Firefox-Version
    96.0.3
    Betriebssystem
    Windows 10 Professional 64 bit

    Hallo,

    ich blende in den Duckduckgo-Suchergebnissen Ergebnisse von für mich uninteressanten Seiten aus. Das geht, weil im ersten div-Element gleich die Domain enthalten ist.

    Bei Startpage kommt die Domain aber erst in einem verschachtelten Element.

    Also div.class div a[href^="domain"]

    So wird zwar dieses Element ausgeblendet, aber nicht der ganzen Kasten des Suchergebnisses. CSS müsste also ausgehend von dem Element mit der URL rückwirkend auf ein übergeordnetes Element wirken. Geht sowas? Ich befürchte nicht.

    Falls nicht, wie müsste ein Skript dafür aussehen?

  • Zur hilfreichsten Antwort springen

    Hallo,

    mit CSS ist so etwas auf Grund der Funktionsweise von CSS aktuell noch nicht möglich. Es ist nicht so, dass es ein technisch völlig unlösbares Problem wäre. Aber es lässt sich nicht so einfach lösen, ohne signifikante Auswirkungen auf die Performance der Website-Darstellung zu haben. Und deswegen wurde ein solches Feature sehr lange nicht standardisiert und von den Browserherstellern implementiert. Das ist (auf Englisch) ausführlich hier erklärt:

    Why we don't have a parent selector
    On a seemingly regular basis, I see this discussion come up as to whether CSS should have a particular feature like the parent selector and while I haven't…
    snook.ca

    Der Artikel ist schon ziemlich betagt (zu dem Zeitpunkt war der Internet Explorer 8 noch aktuell), im Prinzip hat das aber bis heute noch Gültigkeit. Im Prinzip, weil verschiedene Browserhersteller mittlerweile tatsächlich an einer Implementierung arbeiten, die sowas erlaubt, aber noch kein Browser unterstützt das zu diesem Zeitpunkt schon (außer Safari von Apple in einer Vorab-Version). Es wird also kommen, ist aber noch Zukunftsmusik.

    Mit JavaScript ist sowas kein Problem. JavaScript wird ja normalerweise erst ausgeführt, wenn das DOM der Seite komplett geladen ist. Nutzt du denn eine Erweiterung, um bestimmte Scripts auf bestimmten Websites auszuführen?

    • Hilfreichste Antwort

    Ublock kann sowas.

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

    Sören Hentzschel Dankeschön für die Erklärung. Wär auch zu schön gewesen. ^^ Nein, bisher nutze ich Skripte nur für Firefox-Funktionen.

    Durch den Hinweis von .DeJaVu (Dankeschön auch dafür) bin ich auf diese Beschreibung gestoßen https://github.com/gorhill/uBlock…osmetic-filters und damit funktioniert es tatsächlich. So lange bis es mit CSS geht also eine Möglichkeit ohne Skript.

    Beispiel:

    Code: uBlock-Origin-Eintrag in "Meine Filter"
    eu.startpage.com##div.w-gl__result__main:has(a[href^="https://www.exefiles.com"])

  • bege 31. Januar 2022 um 15:15

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.

    Geht einfacher:

    startpage.com##a[href^="https://www.exefiles.com"]:upward(1)

    upward ist das Stichwort.

    Info für alle:

    Zitat

    subject:nth-ancestor(n)

    Do not use.

    Deprecated in favor of

    upward

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

    Die URL kommt in dem zu versteckenden Block zwei mal vor und ist mehrere Ebenen tief verschachtelt. Daher scheint mir im konkreten Fall meine Lösung einfacher und weniger anfällig bei Änderungen zu sein.

    Die Tipps von dir zeigen mir, dass in uBlock Origin viel mehr steckt, als ich wusste. :thumbup:

    Edit: Die Vereinfachung des Hostnamens ist hilfreich!

    Dann liesse sich es auch konkreter machen*

    startpage.com##.w-gl__result__main > a[href^="https://www.exefiles.com"]:upward(1)

    bzw etwas ungenauer

    startpage.com##.w-gl__result__main a[href^="https://www.exefiles.com"]:upward(1)


    Bis auf "upward" ist es identisch wie CSS.

    "nth-ancestor" wurde zur 1.25/1.26 in Betrieb genommen, es funktioniert noch, aber ich werde die Regeln umschreiben.

    Dieses "has" stösst eine richtige Suche innerhalb des Mutter-Elements an, das kann uU die Performance beeinträchtigen beim Seitenaufbau.

    Erstes Beispiel sucht konkret nach dem a[] in direkter Folge (child), das zweite jedes a[] darunter.

    Kindselektoren - CSS | MDN
    Elemente, die vom zweiten Selektor gewählt werden, müssen direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der Nachfahrenselektor, der…
    developer.mozilla.org

    * ich gehe davon aus, dass ".w-gl__result__main" das richtige Mutterelement ist

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

    .DeJaVu upward(1) funktioniert nicht, weil, wie schon geschrieben, die URL weiter als ein Element weit verschachtelt ist. :upward() mit einer Zahl muss immer genau die Verschachtelungstiefe bezeichnen, daher anfällig für jede Veränderung des Layout.

    Nachdem ich aber auf deinen Hinweis hin bei der Suche nach :has und :upward das gefunden habe https://www.reddit.com/r/uBlockOrigin…asx_or_xupward/

    habe ich jetzt diese Variante:

    Code
    startpage.com##a[href*="exefiles.com"]:upward(.w-gl__result__main)

    Die funktioniert erst dann nicht mehr, wenn die CLASS des obersten Elements geändert wird.

    3 Mal editiert, zuletzt von bege (31. Januar 2022 um 19:49) aus folgendem Grund: Code weiter vereinfacht