Select Nth-Child Across Multiple Parents

Select nth-child across multiple parents

You can't do that with CSS selectors alone. :nth-child() and sibling combinators are limited to children/siblings sharing the same parent only, as implied by their names, and CSS selectors cannot account for such variations in parent-child structure, nor is there anything like an :nth-grandchild() selector (even :nth-match() from Selectors 4 limits itself to elements sharing the same parent only).

Of course with something like jQuery it becomes trivial: $('.foo li:eq(0), .foo li:eq(2)') Otherwise you'll have to mark the first and third li elements explicitly using classes or IDs, and then select them.

Applying :nth-child to elements regardless of their different parents

Is kind hard with you html structure. I create the following using .views-field-view-1 element to separate the containers. :nth-child is not working the way you looking:

The :nth-child(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings before it in the document tree, for a given positive
or zero value for n, and has a parent element. More simply stated, the
selector matches a number of child elements whose numeric position in
the series of children matches the pattern an+b.

.downloads .views-field-view-1 .col:nth-child(4n+1) {  background: yellow;}

<div class="downloads">  <div class="views-field views-field-view">    <span class="field-content">   <div class="view">    <div class="view-content">     <div class="col col-xs-3">text</div> <!-- 1 -->     <div class="col col-xs-3">text</div> <!-- 2 -->     <div class="col col-xs-3">text</div> <!-- 3 -->    </div>   </div>  </span>  </div>  <div class="views-field views-field-view-1">    <span class="field-content">   <div class="view">    <div class="view-content">     <div class="col col-xs-3">text</div> <!-- 4: should have a background-color (but nth:-approach counts this as 1) -->     <div class="col col-xs-3">text</div> <!-- 5 -->     <div class="col col-xs-3">text</div> <!-- 6 -->     <div class="col col-xs-3">text</div> <!-- 7 -->     <div class="col col-xs-3">text</div> <!-- 8: should have a background-color -->     <div class="col col-xs-3">text</div> <!-- 9 -->    </div>   </div>  </span>  </div></div>

Select nth element for elements that do not share the same immediate parent

Since :nth-child and other similar selectors make matches based on sibling elements and CSS has no parent-wise selectors this isn't possible.

Less is simply a language that is compiled into CSS, it doesn't actually add any new features into CSS.

The easy alternative is to use Javascript.

getting nth-child of parent

you need to use .closest('tr') .. to select parent tr and .find() to select td:nth-child(3)

$('td:nth-child(-n+2)').on("click", function(){
   alert($(this).closest('tr').find('td:nth-child(3)').text());
});

Working Demo

How to select only first two children of a parent in a mixin with nth-child?, not every first and second

You need to add the child combinator > to the selectors in your mixin to ensure you actually select just the children of #section and not any further descendants:

@mixin two-col($width-left, $width-right) {
    @include clearfix;
    > div:nth-child(1) {
        float: left;
        width: $width-left;
    }
    > div:nth-child(2) {
        float: right;
        width: $width-right;
    }
}

Selecting nth-child From parent id

You need to use child selector here

var Second_child = $('#Parent_id > :nth-child(2)');

If you use descendant selector 2nd child in every level will get selected

Your selector tries to find an element with id Parent_id which is the second child of its parent

Select Nth-Child Across Multiple Parents