あくまで私が想定してる構造と方法に基づきますが、nth-of-typeなど「n番目の要素を指定する」場合は以下が重要です。
- n番目として数えることができる要素を把握する
今回であれば上画像のような構造となっており、青枠内に複数の赤枠が配置されており、この赤枠が「n番目として数える対象」です。
より具体的に書くなら「div.slideshow__slide が4つ並んでいる」という構造です。
そのため2番目を指定するのであれば以下のように考えられます。
.slideshow__slide:nth-of-type(2) {}
繰り返しになりますが以下の手順を踏みます。
- CSSを反映させたい要素を内包する、n番目として数えられる要素を探す
- 該当要素にnth-of-typeなどのn番目を指定できる擬似クラスを追加する
- CSSを反映させたい要素を特定するクラスやIDを追加する
上記のようにして、前出の以下のようなセレクタが作れます。
.foo:nth-of-type(1) .button--primary {
background-color: red;
}