nth-child(odd)のカウントがネストした時にリセットされてしまうのを防ぎたい

Question

下記HTMLにおいて、奇数行のdlタグにのみ背景色を設定したいです。
しかし記述したCSSのnth-child(odd)では、
HTML側でnestWrapperというクラスが挟まる時にカウントがリセットされてしまう（？）ようです。
全体的には偶数行にあたる箇所なので、灰色になってほしくないです。
どうすればよいのでしょう？

JSFIDDLE建てたのでこちらもご覧ください。
JSFIDDLE

    <div class="dlTable">
        <dl>
            <dt>タイトル</dt>
            <dd>本文</dd>
        </dl>
        <dl>
            <dt>タイトル</dt>
            <dd>本文</dd>
        </dl>
        <dl>
            <dt>タイトル</dt>
            <dd>本文</dd>
        </dl>
        <div class="nestWrapper">
            <dl>
                <dt>タイトル</dt>
                <dd>本文</dd>
            </dl>
        </div>
        <dl>
            <dt>タイトル</dt>
            <dd>本文</dd>
        </dl>
        <dl>
            <dt>タイトル</dt>
            <dd>本文</dd>
        </dl>
    </div>

.dlTable dl:nth-child(odd) {
    background-color: grey;
}

以上です。よろしくお願いいたします。

Answer 1

HTML側でnestWrapperというクラスが挟まる時にカウントがリセットされてしまう（？）ようです。

そのとおりで、nth-childは同じ親要素の中での位置を基準に数えます（MDN）。

どうすればよいのでしょう？

CSSだけで対処はできません。「HTML構造を変える」「HTML生成時に適宜クラスを振る」「JavaScriptで対応する」などの必要があります。

Comments

[SNTTNS]

早速の回答ありがとうございました！
JSで何とかしようと思います。

Answer 2

CSSだけでの対処は不可能です。

<div class="nestWrapper"> を入れずに済むようになんとかするか、JavaScriptコードで「<div class="nestWrapper">を無視した奇数番目のdl」に class を付けて:nth-child(odd)を使うのをやめましょう。

Comments

[SNTTNS]

ベストアンサーは振りませんでしたが、早速の回答ありがとうございました！助かりました！

Answer 3

解決済みになっちゃってますが、下記でいいのでは。

.dlTable > *:nth-child(odd) {
    background-color: grey;
}

.dlTable の直下子要素をすべて対象にする。dlに限定せずに。

JSFiddle

子結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[maisumakun]

nestWrapperの中に入るdlが必ず1つなら、これでも解決できますね。

[SNTTNS]

回答いただきありがとうございます。
しかし、maisumakunさんの仰る通りで、nestWrapperの中には何個dlが来てもいいようにしたいのでした。

[hatena19]

なら、JSしかないですね。

Answer 4

理解が違うかもしれませんが

.dlTable  dl:nth-child(odd) {
    background-color: grey;
}

Comments

[SNTTNS]

回答いただいたのはうれしいですが、
これは私が記載したCSSと同一では…？