craftテーマ内のslideshowセクションにおいて、1枚目のスライドのリンクボタンにのみカラー変更をあてたい

[FUFU1]

投稿失礼致します。
現在Craftテーマでに沿って開発中で、時折カスタムcssで色やフォント、transitionなどの変更をかける程度にコードに触れております。

件名の通り、スライドショーの1枚目にだけ変更を適用したいためクラスを探していたのですが、なかなか見つからず路頭に迷ってしまいました。

概要は以下のとおりです。

＊対処したこと

カスタムcssいじりましたが解決しなかったため、開発者ツールを使用してボタン部分のクラスを発見しリキッドファイルを見ながら該当する箇所を探しましたが、結局わからずじまいです…

＊問題

・スライドショーの仕組みがどのファイルのどこで管理されているのか

・スライドが1枚、2枚、3枚と増えていくごとに適応させていくコードがどれなのかがはっきりとわからない

・そもそもスライドを限定したcssの適用ができるのか不明

ご鞭撻いただける方もしくはやったことあるよって方がいましたら、どうかご教授いただけたら幸いです。

よろしくお願いいたします。

[Jizo_Inagaki]

CSSを学んでいるところであれば、以下の擬似クラスを学ばれることをお勧めします。

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes#%E3%83%84%E3%83%AA%E3%83%BC%E6%A7%8B%E9...

試作していませんが、おそらく上記擬似クラスの:nth-of-typeなどで対応できるかなと思います。

[FUFU1]

ご回答ありがとうございます！
勉強になります。

:nth-of-typeで書くとするとクラス名での指定ができないんですね…。
カスタムcssはほぼクラス名で改良していたので、どうにかしてボタンのクラスである「button--primary」を使ってできないものですかね。。

[Jizo_Inagaki]

>:nth-of-typeで書くとするとクラス名での指定ができない

>ボタンのクラスである「button--primary」を使って

上記を把握しかねているのですが、記載されているクラスを指定して対応可能だと思います。

ほぼ答えになってしまいますが、以下のように「最初の.fooの下層にある.button--primary」を指定する形になります。

.foo:nth-of-type(1) .button--primary {
  background-color: red;
}

上記の記述方法では不可ということでしょうか？

[FUFU1]

拙い文章で申し訳ありません。
ご対応ありがとうございます。

.banner__buttons:nth-of-type(2) .button--primary {
background-color: red;
}
スライドの順番を少し変更しまして、1枚目はバナーのみのスライド、2〜4枚目がボタン付きのスライドにして、2枚目のみ効かせたいと思い上記のように変更したのですが、3枚目のスライドが反応してしまいます。

（）の数字を1にしても1、3枚目が赤くなってしまう。
うまく説明できてるか微妙ですが…アドバイスいただけると嬉しいです。

[Jizo_Inagaki · Accepted solution]

あくまで私が想定してる構造と方法に基づきますが、nth-of-typeなど「n番目の要素を指定する」場合は以下が重要です。

• n番目として数えることができる要素を把握する

今回であれば上画像のような構造となっており、青枠内に複数の赤枠が配置されており、この赤枠が「n番目として数える対象」です。

より具体的に書くなら「div.slideshow__slide が4つ並んでいる」という構造です。

そのため2番目を指定するのであれば以下のように考えられます。

.slideshow__slide:nth-of-type(2) {}

繰り返しになりますが以下の手順を踏みます。

1. CSSを反映させたい要素を内包する、n番目として数えられる要素を探す
2. 該当要素にnth-of-typeなどのn番目を指定できる擬似クラスを追加する
3. CSSを反映させたい要素を特定するクラスやIDを追加する

上記のようにして、前出の以下のようなセレクタが作れます。

.foo:nth-of-type(1) .button--primary {
  background-color: red;
}

[FUFU1]

詳細な解説本当に感謝です。
おかげさまで2枚目のみ色変更できました。

順番決めの対象となる要素を先頭に入れてから、nth-of-typeの後に変えたい場所を指定する作りになっているのですね。
学ばせていただきました。

本当にありがとうございます！！