Selector for the 2nd child of a child dvi

Question

Is it possible to select the 2nd div of a child div? for example

<div class="footer-widgets">
  <div class="row">
    <div class="footer1"></div>
    <div class="footer2"></div>
    <div class="footer3"></div>
  </div>
</div>

I tried something like .footer-widgets .row:nth-child(2) { display:none } to no avail

Answer 1

use:

.footer-widgets .row div:nth-child(2) { display:none }

working example

We apply ":nth-child" to the actual child element, not the parent element (though this was a "gothcha" for me the first time I ran across it too.)

Answer 2

demo http://jsfiddle.net/aazvvneL/

.footer-widgets .row > div:nth-child(2) {
    background-color: red;
}

nth-child is applied as in select the element is that is the x child of its parent not like select the x child of this element.