43336


**下記で、偶数行に背景色を付与したい**

[code]

    <p>
    段落を分けるには空行を入れます
    ► 改行はそのまま反映されます
    ► **斜体**や****太字****にできます
    </p>
    
[/code]

* * *

**Q1.可能ですか？**  
・行毎にタグで囲わないと不可能？  
・CSSは要素単位でしか背景色を付与できない？？

* * *

**Q2.動的なタグ追加も可とした場合、どんな方法がありますか？**  
・jsで行ごとにタグで囲って、nth-childすればいけそうな気もするのですが、他になにか良い方法はあるでしょうか？  
・[1行づつ配列にセット](http://nanoappli.com/blog/archives/655)  
・[文字列をタグで囲む](http://www.kantenna.com/pg/2012/05/str_split_js.php)


CC BY-SA 3.0
2018-04-12T15:04:39.750
43187
2018-04-18T01:51:30.943
7886
question
javascript css
同一要素内で、行ごとに背景色を変更したい


**Q1.**  
CSSでは基本的にタグ要素単位でしかプロパティを付与できませんが、ちょうど例としてあげられている[サイト](http://nanoappli.com/blog/archives/655)のコード表記部分のように、要素全体の背景に2行幅でグラデーションが繰り返されるようにしてあげれば、行ごとにタグを付与することなく偶数行に背景色を付与することは可能です。

[code]

    background-color: #eee;
    background-image: linear-gradient( transparent 50%, rgba(255, 255, 255, .9) 50% );
    
[/code]

**Q2.**  
タグ追加前提でいくなら、nth-child(2n)がもっともシンプルなやり方だと思います。


CC BY-SA 3.0
2018-04-18T01:51:30.943
43336
2018-04-18T01:51:30.943
25345
43187
answer