私は私のウェブサイトでdivをゼブラストライプしようとしていますが、十分にシンプルに聞こえますが、divの行の間にヘッダーを追加すると、奇数/偶数スタイルのヘッダーがカウントされるようです
HTML
<div class="container">
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
</div>
CSS
.container {
width:600px;
margin:0 auto;
}
.row {
line-height:24pt;
border: solid 1px black;
}
.row:nth-child(odd) {
background: #e0e0e0;
}
h3 {
line-height:36pt;
font-weight:bold;
color:blue;
}
私はすでにフィドルにあるコードは基本的にヘッダーを無視し、ストライピングを続けると思っていましたが、ヘッダーを子と見なしているようです
nth-child を使用せず、 nth-of-type を使用します
div.container > div:nth-of-type(odd) {
background: #e0e0e0;
}
.container {
width: 600px;
margin: 0 auto;
}
.row {
line-height: 24pt;
border: solid 1px black;
}
div.container>div:nth-of-type(odd) {
background: #e0e0e0;
}
h3 {
line-height: 36pt;
font-weight: bold;
color: blue;
}
<div class="container">
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<h3>Title</h3>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
</div>
おそらく子ではなくタイプで一致させたいでしょう。
:nth-of-typeなどを使用します
.row:nth-of-type(odd) {
background: #e0e0e0;
}
もちろん、最も簡単な解決策は、ストライプ化する要素をラップすることです。
[〜#〜] html [〜#〜]
<div class="container">
<h3>Title</h3>
<div class="zebra">
<div class="row">Content</div>
<div class="row">Content</div>
</div>
<h3>Title</h3>
<div class="zebra">
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
</div>
<h3>Title</h3>
<div class="zebra">
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
<div class="row">Content</div>
</div>
</div>
[〜#〜] css [〜#〜]
.row:nth-child(odd) {background: #e0e0e0;}
browser support が重要な場合、代わりにzebra-stripingサーバー側の追加クラスを生成することもできます。