Identification of the last item

Question

How can I find the last child using css and here is my code.

<div class="leftelement"></div> <div class="rightelement"></div> <div class="leftelement"></div> <div class="rightelement"></div> <div class="leftelement"></div> <!-- this element --> <div class="rightelement"></div> 

I tried the method below and did not work for me. Can someone help me. I do not want to use nth-child, because sometimes the number of elements can increase

.leftelement:last-of-type and .leftelement:last-child does not work

Answer 1

Don't you want to use the css selector? Then you have to edit your tag.

You can use jQuery last() function.

.last ()

Description. Reduce the set of matched elements to the final one in the set.

 $('.wow').last().css('color','blue'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wow">wow </div> <div class="lol">EOOOW </div> <div class="wow">HEYY </div> <div class="lol">LOL </div> 

Answer 2

 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> div:last-child { color: red } 

this is the code code http://codepen.io/yeion7/pen/gPXvNN

Answer 3

You can use :nth-last-of-type(n) for this:

 div:nth-last-of-type(2){ color:red; } 

Increasing the number of elements will not matter until the element you want to select is the one that was before the last.

Note. . This will work if your elements are always structured as one .leftelement and one .rightelement . You cannot select the last .leftelement using only CSS.

UPDATE: If your content is dynamic and sometimes has .leftelement as the very last element, and you still need to select this element, you can do this:

 div:nth-last-of-type(2):not(.rightelement), div:nth-last-of-type(2):not(.leftelement)+.leftelement{ color:red; } 

Take a look at this pen .

Answer 4

I think this is not possible with CSS , because we don't have the last-of-class pseudo last-of-class yet, here is another upset user blog about it.

thing last-of-type and last-child work with the name element not in the class, nevertheless you can write css rules, for example

 div.parent div.lastElement:last-of-type{ color:blue; } 

it will work fine if div.leftElement is the last child of element of its kind , works fine here .

if your .lastElement is the last child of classname , but after that we have another div , it will fail. like this

if you have a ".LINEElement" on different elements , it will all look in style. like this

Juice is what we need a pseudo CSS class like last-of-class , but not done yet.

Answer 5

You can use a nearby selector to achieve something similar, which might help with pure CSS.

 div.rightelement + div:not(.rightelement){ color:green } 

 <div class="leftelement"></div> <div class="rightelement"></div> <div class="leftelement"></div> <div class="rightelement"></div> <div class="leftelement">tushar</div> <!-- this element --> <div class="rightelement"></div>