Bildergalerie nur mit CSS

[Julius]

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