2012-11-03 11 views
54

Eventuali duplicati:
How do I select the “last child” with a specific class name in CSS?CSS: come dire .class: last-of-type [classi, non elementi!]

Come dice il titolo, voglio INDIRIZZO regole CSS per l'ultimo elemento di un certo tipo che ha una certa classe. Il seguente codice funziona perfettamente:

div:last-of-type { margin-right:0; } 

ma voglio qualcosa di simile

div.class:last-of-type { margin-right:0; } 

Come fare questo?

+2

Questo può essere fatto utilizzando un selettore di attributo: [ class = 'class']: last-of-type {margin-right: 0;} Guarda un esempio di lavoro qui http://codepen.io/chasebank/pen/ZYyeab Leggi di più sui selettori di attributi qui http: // css- tricks.com/attribute-selectors/ – Chase

+2

No, i selettori non funzionano qui: [class = 'class']: last-of-type è inteso come "last of type" purché abbia questa classe ", non come" l'ultima di quelli che hanno questa classe ". –

risposta

55

Purtroppo non è possibile trovare l'ultimo .class con last-of-type.

Edit: Per aggiungere in realtà qualcosa di costruttivo da questa risposta, si potrebbe fallback a JavaScript per individuare questo selettore, o rivedere il tuo markup/CSS. Mentre mi sono trovato nella situazione che last-of-type per un selettore di classe sarebbe utile, non è nulla che non possa essere aggirato con un po 'più di pensiero.

+0

Sì, usare ': last-of-type' con un selettore di classe da solo non è intuitivo; è meglio usarlo con un selettore di tipi a meno che tu non voglia veramente che l'ultimo di qualsiasi tipo abbia quella classe. – BoltClock

+3

Un possibile fallback jQuery se davvero non si desidera aggiungere manualmente altre classi: '$ ('. Class'). Last(). AddClass ('last');' – fncombo

+3

@amustill Sono totalmente d'accordo, ma in alcuni casi non hai la possibilità di cambiare il markup (aggiungi una classe, metti un div intorno a qualcosa) perché il tuo client lavora con un CMS di merda che non ha la possibilità di creare o modificare cose del DOM. Questa è la realtà crudele. – Sliq

1

rendere il nomargin una classe CSS, ed è possibile modificare facilmente:

var items = document.getElementsByClassName('nomargin'); 
items[items.length-1].style.color = 'black'; 
items[items.length-1].style.background = 'white'; 

o se che doesn't have enough jQuery, è possibile utilizzare:

jQuery('div.nomargin:last').css({ 
    color:'black', 
    background:'white'}) 
+33

jQuery non è CSS. –

+1

@ JukkaK.Korpela Bene, ma nella vita reale è una soluzione possibile che si adatta alle necessità del cliente. Mi piace la soluzione. – Sliq

+0

@Panique Se stai cercando soluzioni jQuery, allora dovresti ** non ** fare una domanda su una * completamente * diversa tecnologia (CSS in questo caso). –