Uneori poate fi de dorit să îndepărtați marginea superioară sau stângă din primul element dintr-un container. La fel, marja dreaptă sau inferioară de la ultimul element dintr-un container. Puteți face acest lucru aplicând manual clase la HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Reducerea la zero „de sus” / „de jos” fiind utilă cu o stivă verticală de elemente, reducerea la zero „la stânga” / „la dreapta” fiind utilă pentru rândurile orizontale (în general). Dar ... această metodă depinde de adăugarea de clase la HTML. Pseudo-selectorii pot fi o modalitate mai bună mai puțin intruzivă:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Poate doriți să înlocuiți * cu selectoare mai specifice, în funcție de nevoile dvs.
„Fiecare treime” etc.
Să presupunem că ați avut un bloc plutitor de 9 elemente, 3 la 3. Este foarte frecvent ca este posibil să fie nevoie să eliminați marja dreaptă din elementele 3, 6 și 9. Pseudo-selectorul al n-lea-copil ar putea ajuta acolo:
* > :nth-child(3n+3) ( margin-right: 0; )Ecuația de acolo, 3n + 3, funcționează astfel:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
etc.
jQuery
jQuery folosește selectoare CSS3, care include: primul-copil,: ultimul-copil și: n-al-copil (). Aceasta înseamnă că în browserele care nu acceptă sau nu acceptă pe deplin aceste selectoare, acestea vor funcționa în jQuery, astfel încât să puteți înlocui suportul CSS cu suport JavaScript. De exemplu:
$("* > :nth-child(3n+3)").css("margin-right", 0);Suport pentru browser
: first-child și: last-child funcționează în ultima versiune de la toate browserele majore, dar nu în IE 6.: first-child este acceptat în IE 7+. : nth-child funcționează în Safari 3+, Firefox 3.5+ și Chrome 1+, dar încă nu funcționează în IE8.
Vezi și articolul lui David Oliver.