CSS Selektor / Kombinator Pr0blem

InteGralFormat

Lieutenant
Registriert
Jan. 2014
Beiträge
883
Hallo allerseits.

Ich habe mich bisher nur rudimentär mit HTML/CSS beschäftigt und das ist schon wieder so lange her, dass ich einiges vergessen habe, darum hoffe ich auf Eure Hilfe.

Mein Problem: Ich möchte eine Klasse selektieren, genau dann, wenn ein (n-tes) Kind einen bestimmten Attributwert besitzt.

Ich mache das mal am Beispiel der (heutigen) CB-Startseite:

HTML:
<li class="article">
        
        <a href="/2015-10/finanzspritze-nintendo-invenstiert-in-entwickler-niantic-labs/" class="article__pic" tabindex="-1" aria-hidden="true">
            <img src="//pics.computerbase.de/6/8/4/3/8/logo-75x75.1581257048.jpg" srcset="//pics.computerbase.de/6/8/4/3/8/logo-150x150.1581257048.jpg 2x" alt="Finanzspritze: Nintendo invenstiert in Entwickler Niantic Labs" height="75" width="75">
            
        </a>
        
        <div class="article__main">
            <h2 class="article__h2"><a href="/2015-10/finanzspritze-nintendo-invenstiert-in-entwickler-niantic-labs/" class="visited-link">
                <span class="article__context">Finanzspritze</span>
                <span class="article__title">Nintendo invenstiert in Entwickler Niantic Labs</span>
            </a></h2>

            <p class="article__intro">Niantic Labs steht bei Nintendo nicht mehr nur als Entwickler auf dem Zettel, das Unternehmen wird nun auch finanziell von den Japanern unterstützt.</p>

            <ul class="article__meta" role="presentation">
                <li><a href="/forum/showthread.php?t=1522869" class="article__comments-link js-thread-link">3<span> Kommentare</span></a></li>
                
                <li><time class="article__date" datetime="2015-10-15T18:19:00+02:00">18:19</time></li>
            </ul>

            
        </div>
    </li>

Ich möchte die Klasse "article" genau dann selektieren, wenn "article__title" die Zeichenkette "Niantic" enthält.

Ich weiß, wie ich ein Kind-Element selektiere, wenn es ein bestimmtes Eltern-Element als Vorgänger hat. Aber wie es genau anders herum funktioniert, da bin ich mit meinem Latein am Ende.
Ist das überhaupt möglich?
 
Soll in Zukunft aber wohl kommen (siehe erste Antwort) - aktuell bleibt einem nur der Weg über Javascript, wenn man keinen Einfluss auf das HTML hat. Ansonsten eben Klassen bzw. IDs für das Elternelement verwenden.
 
Zuletzt bearbeitet:
Danke für den Stackoverflow Link. Der Entwurf (Draft für Selector Lvl 4) ist ja (leider) noch hochaktuell. Habt ihr zufällig eine Vorstellung, in welchen Zeiträumen sowas umgesetzt wird?

Kann mir jemand einen Ansatz geben, wie ich das Problem mit JavaScript lösen würde? Aktuell passe ich mir meine Websiten über CSS mit stylish so an, wie ich sie haben möchte. Um das selbe mit JS durchzuführen, brauche ich z.B. Greasemonkey, wenn ich das richtig sehe.
Habe noch nie mit JS gearbeitet. Ich werd natürlich mal schauen, ob ich das auf die Schnelle selber zusammengesucht bekomme, was zur Umsetzung notwendig ist.
Wenn ihr Tipps zur Umsetzung oder meinetwegen ein fertiges Script dafür habt, würde ich das natürlich dankend annehmen, dal es mir die Zeit sparen würde. :D
Ergänzung ()

Ok - das mit Greasemonkey hat sich vorläufig wahrscheinlich erstmal erledigt.

Ich habe probiert und probiert und nochmals probiert - funktionierte nicht. Bis ich dann auf die Idee gekommen bin, NoScript mal komplett zu deaktivieren (vorher nur temp. Permissions). Dann funktionierte Greasemonkey wie gewollt. Da das Deaktivieren von NoScript (aus hoffentlich selbsterklärenden Gründen) keine Option ist, heißt das für mich wohl: Warten auf CSS4.
 
Kannst du das spezielle Script (bzw. alle Scripts mit file:///-Prefix oder wie auch immer Greasemonkey die reported) in NoScript nicht erlauben?
 
Das geht und das habe ich auch gemacht. Greasemonkey scheint generell nicht auf lokale Dokumente wirksam zu sein (auch wenn im Metablock der Universalselektor '@include *' verwendet wurde). Oder ich hab was falsch gemacht.

Als erstes habe ich mir ein paar einfache Scripte zum testen gebaut und an einem lokalen HTML-Dokument getestet. Da ging erstmal gar nicht. Es ging jedoch, als ich die Skripte direkt in's HTML übernommen habe und dann mit NoScript Scripte für File///... erlaubt habe.
Auf Seiten im Web funktionierte Greasemonkey wiegesagt erst, wenn ich NoScript deaktiviert hatte. Ich hatte hier auf Wikipedia probiert, da ich hier Scripte generell erlaubt habe.

Andererseits sagt das NoScript FAQ, dass Greasemonkey eigentlich funktionieren müsste. Und GM scheint auch eigentlich nicht auf das Erlauben von Scripten angewiesen zu sein, da es die in eigener Sandbox ausführt.

Summa Summarum: Ich habe keine Ahnung :-/
 

Ähnliche Themen

Zurück
Oben