Come faccio a selezionare “ultimo figlio” con un nome di class specifico in CSS?

  • test1
  • test2
  • test3
  • test4

Come seleziono “ultimo figlio” con il nome della class: lista ?

  ul li.list:last-child{background-color:#000;}  

So che l’esempio sopra non funziona, ma c’è qualcosa di simile a questo che funziona?

IMPORTANTE:

a) Non posso usare ul li:nth-child(3) , perché potrebbe accadere che sia anche al quarto o quinto posto.

b) Nessun JavaScript.

Qualsiasi aiuto sarebbe apprezzato, grazie!

Ti suggerisco di sfruttare il fatto che puoi assegnare più classi a un elemento in questo modo:

 
  • test1
  • test2
  • test3
  • test4

L’ultimo elemento ha la class list come i suoi fratelli ma ha anche l’ last class che puoi usare per impostare qualsiasi proprietà CSS che desideri, in questo modo:

 ul li.list { color: #FF0000; } ul li.list.last { background-color: #000; } 

Questo può essere fatto usando un selettore di attributi.

 [class~='list']:last-of-type { background: #000; } 

La class~ seleziona una parola intera specifica. Ciò consente all’elemento della tua lista di avere più classi se necessario, in vari ordini. Troverà comunque l’esatta “lista” di class e applicherà lo stile all’ultimo.

Vedi un esempio di lavoro qui: http://codepen.io/chasebank/pen/ZYyeab

Maggiori informazioni sui selettori di attributi:

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp

È ansible utilizzare il selettore fratello adiacente per ottenere qualcosa di simile, che potrebbe aiutare.

 .list-item.other-class + .list-item:not(.other-class) 

Verrà effettivamente indirizzato l’elemento immediatamente successivo dopo l’ultimo elemento con la class other-class .

Leggi di più qui: https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Questa è una risposta sfacciata, ma se si è vincolati solo al CSS e in grado di invertire i propri elementi nel DOM, potrebbe valere la pena considerarlo. Si basa sul fatto che mentre non esiste un selettore per l’ ultimo elemento di una class specifica, in realtà è ansible dare uno stile al primo . Il trucco è quindi utilizzare flexbox per visualizzare gli elementi in ordine inverso.

 ul { display: flex; flex-direction: column-reverse; } /* Apply desired style to all matching elements. */ ul > li.list { background-color: #888; } /* Using a more specific selector, "unstyle" elements which are not the first. */ ul > li.list ~ li.list { background-color: inherit; } 
 
  • 0
  • 1
  • 2
  • 0
  • 1
  • 2
  • 3

Immagino che la risposta più corretta sia: Usa :nth-child (o, in questo caso specifico, la sua controparte :nth-last-child ). La maggior parte conosce questo selettore solo con il suo primo argomento per afferrare una serie di elementi basati su un calcolo con n, ma può anche prendere un secondo argomento “di [qualsiasi selettore CSS]”.

Lo scenario potrebbe essere risolto con questo selettore: li:nth-last-child(1 of .list)

Ma essere tecnicamente corretti non significa che tu possa usarlo, perché questo selettore è implementato solo ora in Safari.

Per ulteriori letture:

Non puoi scegliere come target l’ultima istanza del nome della class nel tuo elenco senza JS.

Tuttavia, potresti non essere del tutto fuori dal css-fortuna, a seconda di ciò che stai cercando di ottenere. Ad esempio, utilizzando il prossimo selettore di pari livello, ho aggiunto un separatore visivo dopo l’ultimo dei tuoi elementi .list qui: http://jsbin.com/vejixisudo/edit?html,css,output

C’è una soluzione alternativa (in situazioni specifiche) a questo problema:

Mentre questo non risponde direttamente alla domanda, c’è un’alta probabilità che questo modo di pensare raggiunga lo stesso objective:

Diciamo che siamo andati a hide tutti gli elementi nella lista che sono inferiori a 3 dell’indice

 
  • test1
  • test2
  • test3
  • test4
  • test5

CSS

 li{ display:none; } li.hide ~ li{ display:block; } 

Dimostrazione dal vivo

Questo eliminerà la necessità di aggiungere una class hide a tutti gli elementi che devono essere nascosti, quindi restiamo con una sola class, hide , che li governa tutti. ora, non è necessario utilizzare l’ last-of-type che non può funzionare con i nomi delle classi. devi ripensare al tuo approccio per classificare le cose

Usa questo selettore: ul > li:last-of-type . Questo selezionerà l’ultimo elemento della lista (

  • ) in una lista non ordinata (

      ).

      Ripartizione della risposta: sto selezionando solo il figlio ( > ) di una lista non ordinata (

        ) che è l’ultimo figlio del suo tipo (

      • ) dall’elemento genitore (

          ).

          È ansible utilizzare un ID o una class per limitare il selettore a determinati elenchi non ordinati. Ad esempio: ul.my-class > li:last-of-type sceglierà l’ultimo

        • solo dagli elenchi non ordinati di quella class

           $('.class')[$(this).length - 1] 

          o

           $( "p" ).last().addClass( "selected" );