🧑🎨
Tailwind CSSにて一番上/下の要素にだけCSSをかけたい
要素をmapで回して表示したり、リストを並べて表示したりする際に「一番上だけborderをつけたいのに！！」といった事は無いでしょうか。今回はその方法について、更にTailwindでも対応出来るようにまとめます。
通常のCSS
一番上のみ
li:first-child {
color: lime;
}
一番下のみ
li:last-child {
color: lime;
}
二番目
li:nth-child(2) {
color: lime;
}
一番上以外
li:not(:first-child) {
color: lime;
}
一番下以外
li:not(:last-child) {
color: lime;
}
Tailwind CSSの場合
一番上のみ
first-child:text-lime-500
一番下のみ
last-child:text-lime-500
二番目
[&:nth-child(2)]:text-lime-500
一番上以外
[&:not(:first-child)]:text-lime-500
一番下以外
[&:not(:last-child)]:text-lime-500
こちらに他の疑似要素についてもまとめられています。
参考資料
Discussion