質問: **下記で、偶数行に背景色を付与したい** ``` 段落を分けるには空行を入れます ► 改行はそのまま反映されます ► **斜体**や****太字****にできます ``` --- **Q1.可能ですか?** ・行毎にタグで囲わないと不可能? ・CSSは要素単位でしか背景色を付与できない?? --- **Q2.動的なタグ追加も可とした場合、どんな方法がありますか?** ・jsで行ごとにタグで囲って、nth-childすればいけそうな気もするのですが、他になにか良い方法はあるでしょうか? ・1行づつ配列にセット ・文字列をタグで囲む
回答: **Q1.** CSSでは基本的にタグ要素単位でしかプロパティを付与できませんが、ちょうど例としてあげられているサイトのコード表記部分のように、要素全体の背景に2行幅でグラデーションが繰り返されるようにしてあげれば、行ごとにタグを付与することなく偶数行に背景色を付与することは可能です。 ``` background-color: #eee; background-image: linear-gradient( transparent 50%, rgba(255, 255, 255, .9) 50% ); ``` **Q2.** タグ追加前提でいくなら、nth-child(2n)がもっともシンプルなやり方だと思います。