Identificazione dell'ultimo elemento

Question

Come posso trovare l'ultimo elemento figlio usando css e qui è il mio codice.

<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> 

Ho provato il metodo seguente e non funziona per me. Nessuno mi può aiutare. Non voglio utilizzare nth-child perché a volte il conteggio di elemento può aumentare

.leftelement:last-of-type e .leftelement:last-child non funziona

Answer 1

È possibile utilizzare il selettore fratello adiacente per realizzare qualcosa di simile, che potrebbe aiutare con CSS puro

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>

Answer 2

Se non si desidera utilizzare selettore CSS? Dovresti quindi modificare il tag.

È possibile utilizzare la funzione jQuery last().

.last()

Descrizione: Ridurre l'insieme di elementi corrispondenti a quella finale nel 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 3

<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 
} 

questo è penna di codice de http://codepen.io/yeion7/pen/gPXvNN

Answer 4

È possibile utilizzare :nth-last-of-type(n) per questo:

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

L'aumento del numero di di elementi non importa finché l'elemento che si desidera scegliere è quello prima dell'ultimo.

Nota: Ciò funzionerà se gli elementi sono sempre strutturati come uno .leftelement e uno .rightelement. Non è possibile selezionare l'ultimo .leftelement utilizzando solo CSS.

UPDATE: se il contenuto è dinamico e talvolta ha .leftelement come l'ultimo elemento e si ancora bisogno per selezionare questo elemento, si può fare questo:

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

dare un'occhiata a this pen.

Answer 5

Penso che non sia possibile con CSS perché non abbiamo ancora la pseudo classe last-of-class, ecco un altro utente frustrato blog su di esso.

cosa è last-of-type e last-child lavoro sul nome element non sulla 'classe', tuttavia, è possibile scrivere le regole CSS come

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

funzionerà tutto bene se div.leftElement è ultimo figlio element of its kind, working fine here.

se il tuo .lastElement è l'ultimo figlio di classname ma dopo un altro div, non funzionerà. like this

se si dispone di ".lastElement" su varie elements, tutte le forme di durata verranno applicate. like this

succo è che, abbiamo bisogno di pseudo classe CSS qualcosa di simile last-of-class ma non abbiamo ancora.