Selektor dla dzieci nieparzystych i nieparzystych

Question

Jaki jest prawidłowy selektor do wyboru dzieci równych i nieparzystych?

Chciałbym uprościć mój obecny CSS, jednocześnie pozwalając na nieskończone poziomy bez ręcznego pisania w CSS dla nich.

.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

W przypadku, gdy robisz "pudełko" za pomocą div, możesz zrobić coś takiego. (Patrz kod i podgląd poniżej)

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

Nie ma sposobu, aby to zrobić w CSS, inne niż po prostu usiadł i pisanie reguł. To nie jest wielka sprawa, aby napisać dziesięć zasad, zabierając cię do dziesięciu poziomów zagnieżdżenia. Alternatywą jest spędzanie większej ilości czasu na pisaniu JS, dodawanie klas, lub dodawanie klas dodawania lub walczenie z makrem SASS, z których każda zajmie więcej czasu, niż jest to warte.

.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

Możesz łatwo ustawić klasy według JavaScript.

Zależy od planowanej kwoty i odpowiedniej wydajności. (Zakładam, że nie trzeba tysiące.)

Przykład ten trwa: 500 8ms, 5.5K, 55K 47ms 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

myślę trochę JS byłoby najprostszym sposobem na uproszczenie CSS , chyba że chcesz używać LESS/SASS. - Jak już napisano powyżej, nie ma realnego sposobu na zrobienie tego za pomocą krótkich selektorów 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>