Selettore per bambini di livello pari e dispari

Question

Qual è il selettore corretto per selezionare i bambini pari e dispari?

Mi piacerebbe semplificare il mio attuale CSS pur consentendo infiniti livelli senza scrivere manualmente nel CSS per loro.

.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

Se si crea una "scatola" utilizzando div, si può fare qualcosa di simile. (Vedere il codice e visualizzare in anteprima qui sotto)

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

Non c'è modo di farlo in CSS, diversi dal semplice sedersi e scrivere le regole. Non è un grosso problema scrivere dieci regole, portandoti a dieci livelli di annidamento. La tua alternativa è passare più tempo scrivendo JS per aggiungere classi, o avere le tue classi di back-end add, o combattere con una macro SASS, ognuna delle quali richiederà più tempo di quanto valga.

.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

È possibile impostare facilmente le classi tramite JavaScript.

Dipende dalla quantità pianificata e dalle prestazioni appropriate. (Presumo non hai bisogno di migliaia.)

Questo esempio prende: 500 8ms, 5.5K 47ms, 446ms 55K

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

credo che un po 'di JS sarebbe il modo più semplice per semplificare il CSS , a meno che tu non voglia usare LESS/SASS. - Come già scritto sopra, non esiste un vero modo per farlo con i selettori CSS brevi.

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