web-dev-qa-db-ja.com

：nth-​​child（even / odd）セレクターとクラス

クラスの親を持つリスト内のすべての要素に奇数/偶数セレクターを適用しようとしています。

HTML：

<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>

CSS：

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

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

ul {
    width:100px;
    height: 100px;
    display: block;
}

enter image description here

jsFiddleへのリンク

しかし、色はリセットされています。リスト項目をテキストの色にしたいです。

これを行う方法はありますか？

htmlcsshtml5css3css-selectors
19
nilsi

一般に、あなたが望むことは不可能ですが、限られた数の「除外された」要素に対して望ましい振る舞いを達成する方法があります： 一般的な兄弟コンビネータ~。

これは、_.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;
}

実際の動作を参照.

もちろん、これをどの程度まで受け入れられるかには限界がありますが、純粋なCSSで得られる範囲に近いものです。

21
Jon

これはよくある誤解です

:nth-childおよび:nth-of-typeセレクターは、カウントのために「クラス」などを調べません。 （1）すべての要素、または（2）特定の「タイプ」のすべての要素（classではなく、attributeではなく、- type of element --divまたはliなど）。

したがって、正確なhtml構造を知らずに純粋なCSSでそれをスキップすることはできません（そして、実際に扱っている要素が実際にいくつかある場合にのみ-そのような方法についてJonの答えを参照してください-あなたが扱っている親要素、そしてあなたが見ることができるように、彼は実用的な制限が非常に小さいことに注意するように）、またはjavascriptを使用して。

9
ScottS

nth-match を持つCSS Selectors 4でのみ可能です。

既存のCSSでは、@ Jonの答えのように、またはより「機械的な」方法（ example ）のように、一般的な兄弟コンビネーターの複数回を使用して、いくつかの限られた状況でのみ実行できます：

.parent,
.parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: green;
}

.parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent,
.parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent ~ .parent
{
    background-color: red;
}

実際には、このためにJS/jQueryを使用する方が良いようです。

6
Ilya Streltsyn

CSS

これを現在複製する他の信頼できる方法は、隣接する兄弟セレクターを使用することです：

_.parent,
.parent + .parent + .parent,
.parent + .parent + .parent + .parent + .parent /* etc */
{ background-color: green; }

.parent + .parent,
.parent + .parent + .parent + .parent /* etc */
{ background-color: red; }
_

次の3つのオプションがあります。

  • not()セレクターを使用します。これにより、強調表示が無期限に継続されますが、強調表示する順序がになることがあります。リストに、強調表示する要素の巨大なグループがある場合は、このオプションを使用します。
  • _+_（隣接する兄弟）セレクターを使用します。このオプションは無期限に強調表示を維持しませんが、順序が反転しないことを保証します。リストに強調表示された要素の小さなグループが一緒に含まれる場合は、このオプションを使用します。
  • _~_（任意の兄弟）セレクターを使用します。 一致する兄弟の合計ではなく、リスト全体の長さに基づいてリストが適切に強調表示されないため、これはお勧めしません。これは、他の2つのオプションの前に必ず失敗し、さらに顕著になります。

ここでフィドル： http://jsfiddle.net/corymcd/kVcZJ/

これからHTMLを自由にコピーして、他の人がメソッドを示したものに貼り付けてください。

jQuery

前に述べたように、jQueryのようなものを使用すると、要素を偶数/奇数クラスに簡単に割り当てたり、単にインラインスタイルを変更したりできます。

_// Find all objects to highlight, remove all of the highlighting classes, 
// and then re-highlight.
$(".parent").removeClass('odd even').each(function(index) {
    var objPrev = $(this).prev('.parent');
    if( objPrev.hasClass('odd') ) {
        $(this).addClass('even');
    } else {
        $(this).addClass('odd');
    }    
});
_

ここでフィドル： http://jsfiddle.net/corymcd/kAPvX

4
Corion