CSSだけでフェードイン・アウトのスライドショー（自動再生・サムネイル付）を作りたい

Question

前提・実現したいこと

CSSだけでフェードイン・アウトするスライドショー（サムネイル付）
を作成したいのですが、画像３枚で自動再生がうまくいきません。

発生している問題・エラーメッセージ

真ん中、２枚目が真っ白で、なおかつ
一瞬しか表示されません。

該当のソースコード

<div class="cp_cssslider">
<input type="radio" name="cp_switch" checked/>
<label for="photo1"><img src="img/photo1.jpg" /></label>
<img src="img/photo1.jpg" >
<input type="radio" name="cp_switch"/>
<label for="photo2"><img src="img/photo2.jpg" /></label>
<img src="img/photo2.jpg"/>
<input type="radio" name="cp_switch"/>
<label for="photo3"><img src="img/photo3.jpg" /></label>
<img src="img/photo3.jpg"/>
</div>

*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider {
width: 1420px;
padding-top: 550px; 
position: relative;
margin: 2em auto;
text-align: center;
}
.cp_cssslider > img {
animation: show 12s infinite; 
    max-width: 100%;
    height: auto;
    opacity: 0;
    position: absolute; 
    left: 0;
    top: 0;
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}
/* サムネイル */
.cp_cssslider label {
margin: 15px 5px 15px 5px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 3px;
float:right;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 140px;
border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 2px solid #FF7043;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
}

@keyframes show {
    0% {opacity: 0}
    17% {opacity: 1}
    33% {opacity: 1}
    50% {opacity: 0}
}
 
.slide-show img:nth-of-type(1) {
    position: relative;
}
 
.slide-show img:nth-of-type(2) {
    animation-delay: 0s;
}
 
.slide-show img:nth-of-type(3) {
    animation-delay: 4s;
}
 
.slide-show img:nth-of-type(4) {
    animation-delay: 8s;
}

試したこと

色々検索して、上手く動きそうなものを組み合わせたつもり
だったのですが、どうしても上手くいきません…。

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

Answer 1

各画像に指定していると思われる.slide-show img:nth-of-type()ですが、.slide-showが存在しません。
また、本来指定したい.cp_cssslider対しての子要素imgは３つ(あとはlabelの子要素)です。

追記

子要素についてですが、labelの子要素imgは全て.cp_csssliderの子要素labelの子要素imgとして解釈されるので、.cp_cssslider img:nth-of-type()とした場合は.cp_cssslider img:nth-of-type(1)として判断されます。

.cp_cssslider img:nth-of-type()に変更し、2,3,4と指定しているものを1,2,3としてあげればとりあえずは動きます（レイアウトは崩れると思うのでご自分で修正してみてください。）

あと、コードブロックにしたのはよいですが、コードブロックにする前の部分が残っていますので、削除してくださいね。
同じコードがふたつ並んでいるのに気づかないと、読む時間がもったいない＆めんどくさいです。
編集ありがとうございます。