Tailwind CSS 練習問題 32:Tailwindの構造的バリアント(兄弟要素セレクタ)
Tailwind CSSにおいて、ある要素の直後の兄弟要素(隣接するすぐ後ろの要素)に対してスタイルを適用するために用意されているバリアントとして、正しいものはどれか。
- peer-*
- sibling-*
- next-*
- adjacent-*
- after-sibling-*
正解と解説を見る
正解:peer-*
Tailwind CSSには「peer」というマーカークラスを兄弟要素に付与し、それを起点として他の兄弟要素のスタイルを制御するpeerバリアント(=ある要素の状態に応じて別の兄弟要素のスタイルを変える仕組み)が用意されています。
【正解の理由】
対象となる要素に「peer」クラスを付け、それ以降に続く兄弟要素に「peer-hover:」や「peer-checked:」のような「peer-」バリアントを使うことで、CSSの隣接・一般兄弟セレクタに相当する挙動を実現できます。例えばチェックボックスの状態に応じてラベルのスタイルを変える場合などに使われます。
【不正解の理由】
• 「sibling-*」:Tailwindにこのようなバリアント名は存在しない
• 「next-*」:Tailwindにこのようなバリアント名は存在しない
• 「adjacent-*」:Tailwindにこのようなバリアント名は存在しない
• 「after-sibling-*」:Tailwindにこのようなバリアント名は存在しない