1. #1
    Avatar von DotNet
    Registriert seit
    10.06.2015
    Beiträge
    661
    Thanked 316 Times in 185 Posts

    Standard CSS3 Selektor für div der h3-Element enthält

    Ich möchte CSS Regeln auf einen div anwenden, wenn dieser div ein bestimmtes Überschrift-Element enthält, z.B. ein h3.

    Beispiel:
    HTML-Code:
    <div class=myclass">
        <h3>Test</h3>
         Inhalt
    </div>
    In diesem Beispiel möchte ich .myclass eine bestimmte Schriftgröße zuweisen, wenn darin eine h3 Überschrift enthalten ist. Wäre dort keine h3 Überschrift oder eine andere (h4 etwa), soll die Regel keine Anwendung finden. Was ich suche entspricht dem JQuery-Selektor $('.myclass:has(h3)'), Beispiel:

    $('.myclass:has(h3)').css('font-size', '16px');

    Damit bekommt .myclass die Schriftgröße 16px, wenn ein h3-Element enthalten ist. Genau so etwas suche ich als reinen CSS-Selektor ohne Javascript, doch leider finde ich keinen passenden. Am nähesten kommt der Kind-Selektor (>). Das Problem ist aber, dass die Regel auf das zweite Element (h3) Anwendung findet, nicht auf das erste (.myclass).

    .myclass > h3 { font-size: 16px; }

    Damit würde ich h3 auf Schriftgröße 16px setzen, nicht aber .myclass wie ich es brauche. Gibt es wirklich keine Möglichkeit, das ohne Javascript zu lösen?

    Im Krieg gibt es keine Gewinner, nur Verlierer!

  2. The Following User Says Thank You to DotNet For This Useful Post:

    Negok (04.09.2016)

  3. #2
    Avatar von Bubble
    Registriert seit
    20.11.2011
    Beiträge
    703
    Thanked 510 Times in 327 Posts

    Standard AW: CSS3 Selektor für div der h3-Element enthält

    Hey,

    ich denke nicht, dass das mit CSS(3) funktioniert. Es gibt den Child-Selektor, den du schon hast. Einen Parent-Selektor gibt es meines Wissens nach nicht. CSS selector for "foo that contains bar"? - Stack Overflow

    Du könntest das vielleicht über SASS/SCSS lösen oder bei Möglichkeit durch PHP/Frontend Framework wie Smarty lösen. Es gibt viele Wege nach Rom.

    Aber ehrlich? Ich würde den JS Weg nutzen oder direkt (weil wegen symfony) mit Twig.

    #Pat

  4. #3
    Avatar von qmiq
    Registriert seit
    10.01.2013
    Beiträge
    456
    Thanked 149 Times in 117 Posts

    Standard AW: CSS3 Selektor für div der h3-Element enthält

    Hatte das Problem auch schon und damals glaube ich mit JS gelöst. Alternativ (und je nachdem wie sauber das sein soll) kannst du das auch mit Sub-Divs oder anderen Hilfsklassen lösen. Zum Beispiel ein span inerhalb h3. Oder du definierst direkt einen weiteren Container drumrum.
    - But shit, it was 99 cents! -

Ähnliche Themen

  1. jQuery größer/kleiner als Selektor
    Von DotNet im Forum Webentwicklung
    Antworten: 1
    Letzter Beitrag: 21.01.2016, 19:02
  2. Warum enthält fertiger Kartoffelpüree so viel Wasser?
    Von Fitty im Forum Sport & Gesundheit
    Antworten: 2
    Letzter Beitrag: 28.07.2015, 23:57
  3. Element aus Array entfernen
    Von The Dope Show im Forum PHP
    Antworten: 2
    Letzter Beitrag: 11.06.2014, 13:50
  4. Antworten: 4
    Letzter Beitrag: 12.07.2012, 16:21
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.