Julius: Bildergalerie nur mit CSS

Moin!

Ich versuche gerade eine Bildergalerie nur mit CSS zu erstellen. Die Lösung soll sowohl ohne JavaScipt als auch (rudimentär) ohne CSS funktionieren und keine HTTP-Requests erfordern (bisherige Lösung hängt das anzufordernde Bild als Parameter an die URL):

HTML:

<section id="b1" class="b111">
  <p>&lt;&lt; <a href="#b2">&gt;&gt;</a></p>
  <p>Erste Seite</p>
</section>
<section id="b2" class="b123">
  <p><a href="#b1">&lt;&lt;</a> <a href="#b3">&gt;&gt;</a></p>
  <p>Zweite Seite</p>
</section>
<section id="b3">
  <p><a href="#b2">&lt;&lt;</a> &gt;&gt;</p>
  <p>Dritte Seite</p>
</section>

CSS:

section {display:none;}
section:target {display:block;}
section:first-of-type {display:block;}
section:not(:first-of-type):target~section:first-of-type {display:none;}

Codepen

Ich bin mir sicher, dass es zumindest an der letzten Zeile hängt. Dort versuche ich für den Fall, dass nicht das erste Bild ausgewählt ist, die erste section auszublenden, was aber nicht klappt: Bei den Fragment-Identifiern #b2 und #b3 sind immer die erste und die zweite oder dritte section zu sehen.

So stelle ich mir das von der Funktion her vor: https://codepen.io/jcm/pen/EZqrjZ (quick and dirty mit JavaScript nachgeholfen)

Was mache ich falsch? Kann ich das gewünschte Verhalten überhaupt nur mit CSS erreichen?

Gruß
Julius

akzeptierte Antworten

  1. Hallo Julius,

    > section:not(:first-of-type):target~section:first-of-type {display:none;}
    

    Ich bin mir sicher, dass es zumindest an der letzten Zeile hängt. Dort versuche ich für den Fall, dass nicht das erste Bild ausgewählt ist, die erste section auszublenden, was aber nicht klappt: Bei den Fragment-Identifiern #b2 und #b3 sind immer die erste und die zweite oder dritte section zu sehen.

    Was mache ich falsch?

    Du denkst, CSS könne rückwärts selektieren. Derzeit ist das nicht möglich. Der Geschwisterselektor selektiert nur die jüngeren Geschwister.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Ein möglicher Ansatz wäre, das default-Anzeige-Element in der logische Folge zuletzt zu notieren, und mit flex order es visuell als erstes zu präsentieren. Damit wäre die Lösung mit dem Sybling-Selektor machbar.

      1. Hallo Beat - der Beat? Cappuchino?

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. Ja, der bin ich. Hätte nicht gedacht, dass man hier wiedererkannt wird. Allerding: RIP elcappuccino. Ich habe die letzten 6 Jahre Webdesign ganz liegen gelassen. Derzeit mache ich einen neuen Start.

          So nebenbei, habe mich versucht, hier in den alten Account reinzuhacken, ohne Erfolg. Also bin ich mit neuem Account am Start.

          1. Hallo Beat,

            Ja, der bin ich. Hätte nicht gedacht, dass man hier wiedererkannt wird.

            Doch, ich bin begeistert, von dir zu lesen.

            So nebenbei, habe mich versucht, hier in den alten Account reinzuhacken, ohne Erfolg. Also bin ich mit neuem Account am Start.

            Woran scheiterts?

            Benutzername und E-Mail kann ich dir zukommen lassen, letztere auch ändern. So kannst du dir eine PW-Reset-Mail schicken lassen.

            Willkommen zurück!

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            1. Benutzer/Anmeldename war der gleiche wie mein jetziger Nick, aber eventuell auch [Bb]eatovich

    2. Hej Matthias,

      Du denkst, CSS könne rückwärts selektieren.

      p:nth-last-child(2)?

      Mit CSS zählen

      Marc

      1. Hallo marctrix,

        Du denkst, CSS könne rückwärts selektieren.

        p:nth-last-child(2)?

        Mit CSS zählen

        Das ist keine Rückwärts-Selektion. Das ist ein Zählen aller Absätze. Und zwar imho von vorn. („Insgesamt haben wir 8 Absätze, ich brauche den zweitletzten, also den siebenten.“)

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    3. Hallo Matthias,

      Du denkst, CSS könne rückwärts selektieren. Derzeit ist das nicht möglich. Der Geschwisterselektor selektiert nur die jüngeren Geschwister.

      Interessant, das wusste ich noch nicht, vielen Dank für den Hinweis! Steht das auch irgendwo im Wiki?

      Ich habe es jetzt mit meinen beschränkten JavaScript-Kenntnissen gelöst, ohne target-Pseudoklasse, weil das CSS via :target vor dem JS wirkte, das erste Bild ausblenden sollte, und das gab ein hässliches Aufblitzen des zweiten Bildes, während das erste noch nicht ausgeblendet war.

      Ohne CSS und JavaScript ist die Lösung immer noch brauchbar, daher sah ich keinen Anlass, mich mit dem Checkbox-Hack zu befassen und das einzusetzen.

      Gruß
      Julius

      1. Hallo Julius,

        Der Geschwisterselektor selektiert nur die jüngeren Geschwister.

        Interessant, das wusste ich noch nicht, vielen Dank für den Hinweis! Steht das auch irgendwo im Wiki?

        „Werden zwei einfache Selektoren durch die Tilde („~“) miteinander verbunden, z.B. „E ~ F“, so werden alle F-Elemente angesprochen, die im Elementbaum in derselben Ebene auf ein E-Element folgen - unabhängig davon, ob sich zwischen den Elementen weitere, im Selektor nicht genannte, Elemente befinden.“

        Du kannst natürlich gern einen Satz einfügen, der das noch deutlicher formuliert.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. Hallo Matthias,

          Du kannst natürlich gern einen Satz einfügen, der das noch deutlicher formuliert.

          Ich habe das „folgen“ einfach nur kursiv hervorgehoben, das sollte reichen – vielleicht hätte ich es dann auch nicht einfach so überlesen.

          Aber kann ich auch im Allgemeinen in CSS nicht rückwärts selektieren? Also zum Beispiel einen Thread (bzw. das header-Element des ersten Eintrags) hier im Forum, wenn es neue, ungelesene Einträge enthält? Dafür bräuchte ich dann eine Klasse à la has-unread-entries im HTML, oder?

          Gruß
          Julius

          1. Hallo Julius,

            Ich habe das „folgen“ einfach nur kursiv hervorgehoben, das sollte reichen – vielleicht hätte ich es dann auch nicht einfach so überlesen.

            Seit einiger Zeit heißt der im englischen auch offiziell following-sibling combinator. Früher hieß er general sibling combinator.

            Die Umbennenung finde ich gut.

            Aber kann ich auch im Allgemeinen in CSS nicht rückwärts selektieren?

            Nein, derzeit ist das nicht möglich.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  2. Kann ich das gewünschte Verhalten überhaupt nur mit CSS erreichen?

    Das geht mit dem "Radio-Hack", bzw. "Checkbox Hack". Damit kannst du eine "rückwärts"-Selektion simulieren ohne JS. Alle reinen CSS-Gallerien die ich kenne arbeiten damit.

    1. Aloha ;)

      Kann ich das gewünschte Verhalten überhaupt nur mit CSS erreichen? Das geht mit dem "Radio-Hack", bzw. "Checkbox Hack". Damit kannst du eine "rückwärts"-Selektion simulieren ohne JS. Alle reinen CSS-Gallerien die ich kenne arbeiten damit.

      Der Wiki-Artikel mit Beispielen dazu wird leider einfach nicht fertig, weil ich seit einer Weile keine Zeit dafür finde. Aber danke für die Anregung; wenn ich mal wieder Zeit habe, daran weiterzubasteln, bau ich noch ne Bildergalerie ein 😉

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
      1. :) Fett! Aber auch derbst aufwendig.