Topic on Project:Support desk

How to select nth-child of grandparent element instead of direct parent element

3
SamanthaNguyen (talkcontribs)

Is it possible to select the nth-child of its grandparent element (2nd parent), versus it's parent element? I researched and apparently there are no CSS parent selectors.

My source code is located at http://dev.brickimedia.org/wiki/User:Codyn329/Sandbox/4

I want to do this so I can highlight the current day out of all the days on the calendar. However, since the way I nested it..

<div class="calendar-all-days">
   <div class="calendar-week">
      <div class="calendar-day">

When I select the parent of .calendar-day, it goes to .calendar-week instead of .calendar-all-days.

The main CSS block I'm trying to use to do this is here (Note - I'm using a magic word in a parser function (#css from Extension:CSS) so direct input of {{CURRENTDAY}} in the parentheses should be OK I assume):

.calendar-day:nth-child({{CURRENTDAY}}) {
  background: #27ae60;
  color: #fff;
  font-weight: bold;
}
SamanthaNguyen (talkcontribs)

Notice - I accidentally made a duplicate, can someone delete the other one please? Thanks

GeorgeBarnick (talkcontribs)

I tried to research this and the only option I can come up with is using js instead of {{#css: }}

// this is just a function to create a simple "nthParent" in jQuery
// http://stackoverflow.com/questions/8180320/how-to-find-nth-parent-of-an-element-using-jquery
$.fn.nthParent = function( n ) {
    var p = this;
    for( var i = 0; i < n; i++ )
        p = p.parent();
    return p;
}

var date = new Date().getDate();

$( '.calendar-day:nth-child( ' + date + ' )' ).nthParent( 2 ); // selects the grandparent element of the nth-child
Reply to "How to select nth-child of grandparent element instead of direct parent element"