Sampo: css-Selektor für vorheriges Element?

Hallo.

Ich suche nach einem css-Selektor für Grafiken, die sich vor bestimmten Absätzen befinden. In HTML steht beispielsweise

<img src="graphic.png"><p class="GraphicLabel">some text</p>

Sinn der Sache ist hier, solche Grafiken zu zentrieren. Den Absatz nach einer Grafik selektieren ginge so (wenn man p.GraphicLabel nicht nutzen kann):

img + p { text-align:center; }

Aber anders herum?

  1. Hallo Sampo,

    Ich suche nach einem css-Selektor für Grafiken, die sich vor bestimmten Absätzen befinden.

    Kurz und knapp: es gibt keinen Selektor für das vorhergehende Element. Das ist ein technisches Problem, deshalb gibt es das bisher nicht.

    LG,
    CK

    1. Hallo CK.

      Ich hab's befürchtet. Aber vielleicht komme ich auf andere Weise weiter: Hilfreich wäre alternativ ein Selektor für Grafiken, die sich nicht in einem <p>-Element befinden.

      Nötig wäre also das Gegenteil von

      p > img
      

      Aber ganz so einfach ist es offenbar doch nicht, denn der folgende Selektor klappt bei mir nicht.

      :not(p > img)
      
      1. Hallo Sampo,

        ">" ist ein Kombinator, und innerhalb von :not sind nur einfache Selektoren erlaubt (siehe hier). Deswegen geht das nicht.

        Das Problem bei CSS ist, dass man nur "vorwärts" selektieren kann. Wenn ich mich richtig erinnere, wurde ein Blick zurück oder zum Elternelement von den entsprechenden Gremien aus Performancegründen abgelehnt.

        Grafiken, die nicht in einem p sind, könnte durch :not(p) img bzw. :not(p) > img erreicht werden. Habe ich jetzt allerdings nicht ausprobiert.

        Wenn das nicht zielführend ist: Ich bin ja ein pragmatischer Mensch; ich würde das Image und den Paragraphen in ein div einhüllen, dann kannst Du vorwärts selektieren.

        Gruß Rolf

        1. Hallo,

          Das Problem bei CSS ist, dass man nur "vorwärts" selektieren kann. Wenn ich mich richtig erinnere, wurde ein Blick zurück oder zum Elternelement von den entsprechenden Gremien aus Performancegründen abgelehnt.

          so habe ich das auch mal gelesen.

          Grafiken, die nicht in einem p sind, könnte durch :not(p) img bzw. :not(p) > img erreicht werden. Habe ich jetzt allerdings nicht ausprobiert.

          Ersteres eher nicht; das würde alle Grafiken selektieren, die irgendein Vorfahrenelement haben, das kein p ist. Also alle, denn jede Grafik im Dokument hat mindestens body und html als Vorfahren. Das andere müsste gehen; ist die Grafik aber innerhalb des p-Elements noch eine Ebene tiefer verschachtelt (etwa in einem Link), dann greift dieser Selektor auch wieder ins Leere.

          Wenn das nicht zielführend ist: Ich bin ja ein pragmatischer Mensch; ich würde das Image und den Paragraphen in ein div einhüllen, dann kannst Du vorwärts selektieren.

          Ehrlich? Grafiken, die Kindelemente eines div sind, das kein p als Kind enthält? Krieg ich in CSS nicht gebacken.

          So long,
           Martin

          --
          Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
          - Douglas Adams, The Hitchhiker's Guide To The Galaxy
          1. Ehrlich? Grafiken, die Kindelemente eines div sind, das kein p als Kind enthält? Krieg ich in CSS nicht gebacken.

            Nein - ich würde hier geistige Mitarbeit des HTML Autors (bzw. desjenigen, der das HTML generiert) erwarten und das HTML so aufbauen, dass das DIV nur für die erforderlichen Fälle eingesetzt wird. Alternativ: Das DIV immer einsetzen und je nach Situation eine passende CSS Klasse zuordnen. Ist natürlich alles andere als elegant, und vermutlich bekomme ich jetzt einen Shitstorm zum Thema "Wie baut man Webseiten richtig". Die Shitwerfer würde ich dann aber gleich bitten, eine "gute" Lösung mitzuliefern.

            Gruß Rolf

        2. Hallo Rolf.

          ">" ist ein Kombinator, und innerhalb von :not sind nur einfache Selektoren erlaubt (siehe hier). Deswegen geht das nicht.

          Schade, aber nachvollziehbar.

          Grafiken, die nicht in einem p sind, könnte durch :not(p) img bzw. :not(p) > img erreicht werden. Habe ich jetzt allerdings nicht ausprobiert.

          Gute Idee, beide Selektoren wirken. Doch es werden alle Grafiken selektiert, auch solche, die in einem p sind. Bei :not(p) > img nachvollziehbar, weil img nicht immer direktes Kind von p ist. Doch warum :not(p) img versagt, verstehe ich nicht.

          Ich habe mir jetzt anders beholfen: Zunächst werden alle img zentriert, als Ausnahme werden img in p wieder "normal" inline gesetzt.

          img {display: block; margin-left: auto; margin-right: auto; }
          p img { display: inline; margin-left: 0; margin-right: 0;  }
          

          Danke, die Kommentare haben mich auf den Weg gebracht.

          1. Hallo

            Wie willst du Lösungen von uns erwarten wenn du das Problem erst mit deiner eigenen Lösung mitteilst?

            Gruss

            MrMurphy

          2. Hallo,

            Gute Idee, beide Selektoren wirken. Doch es werden alle Grafiken selektiert, auch solche, die in einem p sind. Bei :not(p) > img nachvollziehbar, weil img nicht immer direktes Kind von p ist. Doch warum :not(p) img versagt, verstehe ich nicht.

            warum das so ist, habe ich eben erklärt.

            Ich habe mir jetzt anders beholfen: Zunächst werden alle img zentriert, als Ausnahme werden img in p wieder "normal" inline gesetzt.

            img {display: block; margin-left: auto; margin-right: auto; }
            p img { display: inline; margin-left: 0; margin-right: 0;  }
            

            Kann man machen. Das wird halt unübersichtlich, wenn man mehrere Eigenschaften zunächst "global" zuweist und dann lokal wieder aufhebt bzw. überschreibt.

            So long,
             Martin

            --
            Nothing travels faster than the speed of light with the possible exception of bad news, which obeys its own special laws.
            - Douglas Adams, The Hitchhiker's Guide To The Galaxy
            1. Doch warum :not(p) img versagt, verstehe ich nicht. warum das so ist, habe ich eben erklärt.

              Danke, habe ich verstanden.

              Ich habe mir jetzt anders beholfen: Zunächst werden alle img zentriert, als Ausnahme werden img in p wieder "normal" inline gesetzt. Kann man machen. Das wird halt unübersichtlich, wenn man mehrere Eigenschaften zunächst "global" zuweist und dann lokal wieder aufhebt bzw. überschreibt.

              Stimmt. Die sauberere Lösung ist, den HTML-Text zu ändern, damit dann einfacheres css möglich wird. Mal sehen, wann ich das umsetzen kann.

              Gruß, Sampo

      2. Tach!

        :not(p > img)
        

        Abgesehen davon, dass der wohl nicht geht, wie gesagt wurde, würde der auch nicht zielführend sein, denn es gibt eine ganze Menge Zeugs, das kein img als Kind von p ist.

        Und wenn ich so bei caniuse.com schaue, sehe ich bei not() ziemlich viel rot.

        Mir würde jetzt noch :has() einfallen, aber das ist noch weniger grün.

        dedlfix.

  2. Hallo

    ob eine Lösung mit HTML und CSS möglich ist hängt davon ab, in wie weit der Quelltext angepasst werden kann. Es ist frustrierend Lösungen zu suchen und anschließend zu erfahren, dass der Quelltext fest vorgegeben ist.

    Zudem wäre ein Link zu einer Beispielseite sinnvoll.

    Wenn der zentrierte Absatz direkte Angaben zu dem Bild enthält ist eventuell auch ein figure-Element mit einem figcaption-Element sinnvoll.

    Gruss

    MrMurphy

    1. Hallo McMurphy.

      ob eine Lösung mit HTML und CSS möglich ist hängt davon ab, in wie weit der Quelltext angepasst werden kann. Es ist frustrierend Lösungen zu suchen und anschließend zu erfahren, dass der Quelltext fest vorgegeben ist.

      Freilich, wenn ich den Quelltext verändern kann, dann bekommen die gewünschten Grafiken eine Klasse, und der css-Selektor ist gleich fertig. Oder das Bild wird in ein figure-ELement gelegt.

      Da der Aufwand für das Ändern des Quelltexts erheblich ist, suche ich lieber noch weiter nach einem Selektor, siehe auch meine Antwort auf CK.

      Gruß, Sampo