一致しない要素をスキップするときに :nth-child を使用して要素の色を切り替える方法は?

:nth-child(even/odd) クラス付きセレクター

CSS では、:nth-child(n) セレクターが要素を選択しますそれは親の n 番目の子です。 n が奇数の場合、nth-child(odd) セレクターは奇数の要素を選択し、n が偶数の場合、nth-child(even) セレクターは偶数の要素を選択します。

次の HTML マークアップを考えてみましょう。ここで、:nth-child セレクターをクラス「parent」のリスト項目に適用したいとします:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

上記の HTML に次の CSS を適用します:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

予期せぬことに、最初の非 .parent 要素の後にリセットされる要素の色。これは、:nth-child セレクターが、クラス「parent」を持つ要素だけでなく、リスト内のすべての要素に適用されるためです。

目的の動作を実現するには、一般的な兄弟コンビネータ (~) を使用する必要があります。 、DOM ツリー内の別の要素の前にある要素を選択します。これを :nth-child セレクターと組み合わせることで、非 .parent 要素が出現するたびに ".parent" 要素の色を切り替えることができます。

.parent:nth-child(odd) {
    background-color: green;
}
.parent:nth-child(even) {
    background-color: red;
}

/* after the first non-.parent, toggle colors */
li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: red;
}
li:not(.parent) ~ .parent:nth-child(even) {
    background-color: green;
}

/* after the second non-.parent, toggle again */
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(odd) {
    background-color: green;
}
li:not(.parent) ~ li:not(.parent) ~ .parent:nth-child(even) {
    background-color: red;
}

このアプローチにより、色を切り替えることができます。 .parent 以外の要素をスキップしながら、「.parent」要素の数を変更します。ただし、:nth-child セレクターが先読みできる非 .parent 要素の数は制限されているため、この手法は、多くの代替クラスを含む非常に長いリストには実用的ではない可能性があります。

以上が一致しない要素をスキップするときに :nth-child を使用して要素の色を切り替える方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。