CSS奇数行、偶数行の背景色を変える
nth-child など、子要素に適応させるCSSでいつもわからなくなってしまうので、メモします。
hover との併用で何故か hover が効かないこともあったので合わせてメモします。
test
test
test
test
<style>
/* 行でマウスオーバー色変化 */
.row-a:hover {
background: #00c8ff !important;
/* nth-child に背景色を設定すると nth-child が優先されて
hover が効かないようなので !important を追加*/
color: #010101;
}
/* 偶数行の色を変える クラスで指定 row の子要素 row-a に適応、
奇数の場合は nth-child(odd) を指定します */
.row .row-a:nth-child(even){
background: #cecece;
}
.row-a {
width: 100%;
display: block; /* display、block 指定が必要 */
}
</style>
<div class="row">
<a href="#" class="row-a">
test
</a>
<a href="#" class="row-a">
test
</a>
<a href="#" class="row-a">
test
</a>
<a href="#" class="row-a">
test
</a>
</div>
<div class="row">
<div class="row-a">
test
</div>
<div class="row-a">
test
</div>
<div class="row-a">
test
</div>
<div class="row-a">
test
</div>
</div>