偶数および奇数レベルの子のセレクタ

Question

偶数および奇数レベルの子を選択するための正しいセレクタは何ですか？

私は現在のCSSを簡素化し、手動でCSSを書くことなく無限のレベルを可能にしたいと考えています。

.box { 
    max-width:100%;margin:25px 0px;padding: 15px; 
    border:#d1ddbd solid 2px; 
    background-color:#f3fae8; 
} 

.box > .box { 
    border:#d1ddbd solid 1px; 
    background-color:#fff; 
} 

.box > .box > .box { 
    border:#d1ddbd solid 1px; 
    background-color:#f3fae8; 
} 

.box > .box > .box > .box { 
    border:#d1ddbd solid 1px; 
    background-color:#fff; 
} 

Answer 1

divを使用して「ボックス」を作成する場合、このようなことを行うことができます。ただ座っとルールを書くよりも、他のCSSでこれを行うには方法は、ありません

div:nth-child(even) 
{ 
    border:#d1ddbd solid 1px; 
    background-color:#f3fae8; 
    width:76px; 
    height:75px; 
} 
div:nth-child(odd) 
{ 
    border:#d1ddbd solid 1px; 
    background-color:#fff; 
    width:76px; 
    height:75px; 
} 
#MainDiv{ 
    max-width:100%;margin:25px 0px;padding: 15px; 
    border:#d1ddbd solid 2px; 
    background-color:#f3fae8; 
    display:block; 
    padding:2px; 
    height:auto; 
} 

    <div id="MainDiv"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 

Answer 2

（コードと下のプレビューを参照してください）。 10個のルールを作成するのはそれほど大したことではなく、10個のネストレベルまで減らすことができます。あなたの選択肢は、クラスを追加するためにJSを書く時間を増やすか、バックエンドのクラスを追加するか、SASSマクロを使って戦うことです。これよりも時間がかかります。

.box { 
    max-width: 100%; 
    margin: 25px 0px; 
    padding: 15px; 
    border: #d1ddbd solid 2px; 
} 

.box > .box { 
    border-width: 1px; 
} 

.box, 
.box > .box > .box, 
.box > .box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box > .box > .box > .box { 
    background-color:#f3fae8; 
} 

.box > .box, 
.box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box > .box > .box, .box > .box { 
    background-color:#fff; 
} 

Answer 3

JavaScriptでクラスを簡単に設定できます。

計画額と適切なパフォーマンスによって異なります。 （私はあなたが数千人を必要としないと推定。）

この例では、かかる：500の速度8ms、5.5K 47ms、55K 446ms

/** Extending Javascript Array for function Contains */ 
Array.prototype.contains = function (element) { 
    return this.indexOf(element) > -1; 
}; 

/** Set class "odd" to itself and run proceedEven() on all children with class "box" */ 
function proceedOdd(oddItem) { 
    oddItem.classList.add("odd"); 
    if (oddItem.children.length) { 
     [].forEach.call(oddItem.children, function (child) { 
      if (child.classList.contains("box")) { 
       proceedEven(child); 
      } 
     }) 
    } 
} 

/** Set class "even" to itself and run proceedOdd() on all children with class "box" */ 
function proceedEven(evenItem) { 
    evenItem.classList.add("even"); 
    if (evenItem.children.length) 
     [].forEach.call(evenItem.children, function (child) { 
      if (child.classList.contains("box")) { 
       proceedOdd(child); 
      } 
     }) 
} 

// set root having first even box as child 
var root = document.querySelectorAll("body"); 

if (root.length) { 
    // just for case more in root 
    [].forEach.call(root, function (rootItem) { 
     if (rootItem.children.length) 
      [].forEach.call(rootItem.children, function (child) { 
       // proceed first level of evens - rest done recursively 
       if (child.classList.contains("box")) proceedEven(child); 
      }); 
    }) 
} 

Answer 4

を、私はJSのビットはCSSを簡素化するための最も簡単な方法だと思いますあなたがLESS/SASSを使用したくない場合は、 - 既に上で書いたように、短いCSSセレクタでこれを行う本当の方法はありません。

(function addClasses(element, selector, level){ 
 
    [].forEach.call(element.querySelectorAll(selector), 
 
        function (item, index) { 
 
    \t \t  item.className += " " + (level % 2 ? "white-bg" : "green-bg"); 
 
        item.innerHTML += ""; 
 
        addClasses(item, ".box", level+1); 
 
        } 
 
); 
 
})(document, ".box", 0);

.box { 
 
    max-width: 100%; 
 
    margin:25px 0px; 
 
    padding: 15px; 
 
    border: #d1ddbd solid 2px; 
 
} 
 

 
.box.white-bg { 
 
    background-color: #ffffff; 
 
    border: #d1ddbd solid 1px; 
 
} 
 
.box.green-bg { 
 
    background-color: #f3fae8; 
 
    border: #d1ddbd solid 1px; 
 
}

<div class="box"> 
 
    1 
 
    <div class="box">1.1</div> 
 
    <div class="box">1.2</div> 
 
</div> 
 

 
<div class="box"> 
 
    2 
 
    <div class="box"> 
 
    2.1 
 
    <div class="box"> 
 
     2.1.1 
 
     <div class="box">2.1.1.1</div> 
 
    </div> 
 
    <div class="box">2.1.2</div> 
 
    <div class="box">2.1.3</div> 
 
    <div class="box">2.1.4</div> 
 
    <div class="box">2.1.5</div> 
 
    </div> 
 
    <div class="box"> 
 
    2.2 
 
    </div> 
 
    <div class="box"> 
 
    2.3 
 
    </div> 
 
</div> 
 

 
<div class="box"> 
 
    3 
 
    <div class="box">3.1</div> 
 
</div>