Even and odd selector for children

Question

What is the right selector for choosing even and odd children?

I would like to simplify my current CSS by allowing you to use infinite levels without having to manually write to CSS for them.

.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

In CSS, there is no way to do this except to just sit and write the rules. It’s not such a big deal to write ten rules, bringing you to ten levels of nesting. Your alternative is to spend more time writing JS to add classes or add additional classes or deal with the SASS macro, which will take more time than it costs.

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

If you make a “field” using a div, you can do something like this. (See Code and Preview below)

 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 3

You can easily set the classes in JavaScript.

Depends on the planned amount and the corresponding performance. (I suppose you don't need thousands.)

In this example: 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

I think a little JS will be the easiest way to simplify CSS if you don't want to use LESS / SASS. - As mentioned above, there is no real way to do this with short CSS selectors.

 (function addClasses(element, selector, level){ [].forEach.call(element.querySelectorAll(selector), function (item, index) { 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>