CSSのみでスライドショーを作るときの備忘録

　先に重要な点をまず一つ。

　「CSSでスライドショーを作る」なんてことはしないほうがいいです。素直にJavaScriptを使ったほうが健全です。複雑な構造になるとレンダリングがヤバくなってリンクが正常に反応しなくなったり(反応が遅れたり)するので、「JavaScript禁止」とか「JavaScriptをhead内に書き込めない状況」などの場合以外はCSSでスライドショーなんて作らないほうがいいです。
　わたし　は　つくりました

セレクタの注意点

　セレクタはとても便利ですが、「子要素から親要素にスタイルを適用することはできない」や「その要素より前の要素を指定する方法がない」などの制約があります。
　そのため、スタイルを適用したい要素はトリガーとなる要素の後ろ、もしくは子にしなければならないことを覚えておかないと単純な所でハマってしまいます。

:targetの注意点

　#slide:target の対象はどこでしょうか。

<a href="#slide"></a>

　ではなく、

<div id="slide"></div>

　にスタイルが適用されます。
　aタグをクリックし、#slideにターゲットされた時(URL末尾にハッシュが追加された時)に、#slideというidを持つ要素に対してスタイルが適用されます。
　aタグはスタイルを適用するトリガーとして使用されます。
　CSSのみでスライドショーを作るなら、大抵targetとなる要素を先に記述し、その後ろにナビゲーションを記述します。

pointer-events:none;を把握しておかないとつらい

　pointer-events:none;は複雑なCSSを書く場合にはとても重要なプロパティです。
　幸いにもCSSは「○○がターゲットされた時、○○と同じ階層で○○より後ろに記述されている△△の子要素の□□の◇◇が☆☆以外だった場合にマウスイベントを無効化する」みたいな複雑なことが書けるほどに成長しているので、pointer-events:none;を理解するとCSSの幅がとても広がります。
　(要約すると
　　#slide:target ~ #slideBody a:not([href="#slide"]){
　　 pointer-events: none;
　　}
　みたいなこと)

　pointer-eventsの値がnoneの場合、その要素と重なっている下の要素に対してマウスイベントが有効になります。(z-indexによる重なり順序の変更を必要としない)
　スライドショーの左右のアローを作る場合、表示されている画像毎にトリガーを切り替えなくてはならないのですが、これを使用するととても簡単に作ることができます。