CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Daft
Daft

Reputation: 10984

Check which element is closest to the bottom of it's container. JS / jQuery

If I have the following page:

<div class="container">
    <div class = "data" ></div>
    <div class = "data" ></div>
    <div class = "data" ></div>
<div>

Is there a way, with JS, jQuery or maybe CSS3, to check which 'data' div is at the bottom? ie, closest to the bottom of 'container'. And then add a class to that div.

Upvotes: 0

Views: 457

Answers (3)

Ali Gajani
Ali Gajani

Reputation: 15089

You can use the :last-child selector available to you in CSS.

.data:last-child { }

Upvotes: 1

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

This is the jQuery approach to assign a class to the last element with the data class

 $(document).ready(function(){

    $('.data').last().addClass("give class name");

 });

Upvotes: 2

sjkm
sjkm

Reputation: 3937

Using Jquery:

var lastElement = $('.container .data:last-child');
lastElement.addClass('yourClass');

using native js:

var div = document.getElementsByClassName("container")[0];
var lastElement = div.lastChild;
lastElement.className = lastElement.className + ' yourClass';

using css:

.container .data:last-child { }

Upvotes: 2

Related Questions