Select the third div from bottom

Question

How can i select the third div from bottom (i.e in this case, the div with "4")

I tried this but it selected last three divs.

$('div:gt(-3)').css('background':'red');

Kindly know that, i may not know the total divs(it's dynamic), but i only need to select the third div from bottom.

user_13573444 · Answer

You can use the eq() method by specifying a value of -3, which will hover over the third element from the bottom.

$('div:eq(-3)').css('background', 'red');

user_82548 · Answer

If all you're trying to do is apply styling to that element:

/* a simple reset so all elements have similar
   and consistent defaults: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* purely for aesthetics in order to visually
   separate each of the 'demo' blocks; using
   CSS logical properties to define margins: */
.demo {
  border: 1px solid #000;
  margin-block: 1em;
  margin-inline: 0.5em;
}

/* to visually distinguish the selected elements: */
.elem:nth-last-child(3) {
  background-color: #f00;
  color: #fff;
}

If you instead need to use JavaScript, then I'd suggest the following:

// defining an Arrow function, passing two arguments:
// selector: a String, CSS selector with which to select the elements,
// index: a Number, the 1-based index of the element starting from
//                  the end. The last element would be index 1, the
//                  penultimate element index 2:
const nthLastChild = (selector, index) => {

  // here we return an Array literal, which takes the spread operator and
  // converts the iterable NodeList returned from document.querySelectorAll()
  // and converts it into an Array:
  return [...document.querySelectorAll(
    // the template-literal we use to construct the CSS selector, we use a
    // template-literal in order to interpolate the JavaScript variables
    // into the String:
    `${selector}:nth-last-child( ${Math.abs(index)} )`
  )];
}

// because we return an Array, we can here use Array.prototype.forEach()
// - along with other Array methods - to perform operations on the returned
// elements:
nthLastChild('.elem', '-3').forEach(
  (el) => {
    el.style.color = '#fff';
    el.style.fontWeight = 'bold';
    el.style.background = 'linear-gradient(90deg, #f90, #fff)';
  });

*,
::before,
::after {
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.demo {
  border: 1px solid #000;
  margin-block: 1em;
  margin-inline: 0.5em;
}

References:

user_15008203 · Answer

const elements = document.querySelectorAll(".elem");
const lastThird = elements[elements.length - 3];

user_9153448 · Answer

const allElem = [...document.querySelectorAll(".elem")];
allElem[allElem.length - 3].style.background = "red";

user_15316462 · Answer

You can simply use $('body div')[$('body div').length-3]; as a selector. This selects all the

s and then selects the third from the bottom.

user_15524327 · Answer

The best way to your problem will be to use nth-last-child() CSS property. add the following code in your CSS file.

.elem:nth-last-child(3){
background: red;
}

Select the third div from bottom

6 Answers