A volte può essere desiderabile rimuovere il margine superiore o sinistro dal primo elemento in un contenitore. Allo stesso modo, il margine destro o inferiore dell'ultimo elemento in un contenitore. Puoi farlo applicando manualmente le classi all'HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )L'azzeramento "alto" / "basso" è utile con una pila verticale di elementi, l'azzeramento "sinistra" / "destra" è utile per le righe orizzontali (in generale). Ma ... questo metodo dipende dall'aggiunta di classi all'HTML. Gli pseudo-selettori possono essere un modo migliore e meno invadente per andare:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Potresti voler sostituire * con selettori più specifici secondo le tue esigenze.
"Ogni terzo", ecc.
Supponiamo che tu abbia un blocco flottato di 9 elementi, 3 per 3. È molto comune che potresti dover rimuovere il margine destro dal 3 °, 6 ° e 9 ° elemento. Lo pseudo-selettore dell'ennesimo figlio potrebbe essere in grado di aiutarti:
* > :nth-child(3n+3) ( margin-right: 0; )L'equazione lì, 3n + 3, funziona in questo modo:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
ecc.
jQuery
jQuery utilizza i selettori CSS3, che includono: first-child,: last-child e: nth-child (). Ciò significa che nei browser che non supportano o non supportano completamente questi selettori, funzioneranno in jQuery, quindi puoi sostituire il supporto CSS con il supporto JavaScript. Per esempio:
$("* > :nth-child(3n+3)").css("margin-right", 0);Supporto del browser
: first-child e: last-child funzionano nell'ultima versione di tutti i principali browser, ma non in IE 6.: first-child è supportato in IE 7+. : nth-child funziona in Safari 3+, Firefox 3.5+ e Chrome 1+, ma ancora non funziona in IE8.
Vedi anche l'articolo di David Oliver.