コメントの背景色を2色交互にしたい

コメントごとに背景色を変えたいです。
任意の2色を交互にコメントの背景色として表示することは可能でしょうか?

また、2色以上の候補からランダムに選択し背景色として表示出来たらさらに嬉しいです。

有識者の皆様お知恵を貸していただけないでしょうか:bowing_woman:
よろしくお願いいたします。

配信ソフト OBS
使用テンプレート basic slim

1 Like

とりあえず、2色交互にしてみました、左がslimで右がbasicに適用したスクショです。

.odd  {background-color:lightpink;}
.even {background-color:lightgreen;}

lightpinkやlightgreenのところを変えると色が変わります。

また、OBSのカスタムCSSのみではランダムというのは多分(?)むずかしい気がする(自信ない)のですが、ランダムに見えるぐらいの数、色を並べることでランダムっぽくなるかもしれません。しかしなんか手元でうまく行かないのでとりあえず2色交互だけのcssと、参考資料のリンクだけ置いておきます。

もしかしたら役に立つかもしれない情報↓(見当違いの可能性もあり)
:nth-child() - CSS: カスケーディングスタイルシート | MDN

本当に見当違いでした(返信に追記)

2 Likes

hyk様

とても迅速に解決策ご返信いただきましてありがとうございます:bowing_woman::pray:
無事反映出来ました。本当にありがとうございます:bowing_woman:

2 Likes

見当違いだったCSSの例もここに供養しておきます。

div.comment:nth-child(7n){background-color:red;}
div.comment:nth-child(7n+1){background-color:lightgreen;}
div.comment:nth-child(7n+2){background-color:lightblue;}
div.comment:nth-child(7n+3){background-color:snow;}
div.comment:nth-child(7n+4){background-color:lightgreen;}
div.comment:nth-child(7n+5){background-color:pink;}
div.comment:nth-child(7n+6){background-color:lightblue;}

右上が適用したものです。(imgur: https://imgur.com/kCoVkwd)

2 Likes

場所が固定される形で、でもカラフルになってますね!!
すごいです!ありがとうございます!!

1 Like