Néha kívánatos lehet eltávolítani a tartály első elemének felső vagy bal margóját. Hasonlóképpen, a tároló utolsó elemének jobb vagy alsó margója. Ezt úgy teheti meg, hogy manuálisan alkalmazza az osztályokat a HTML-re:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )A „felső” / „alsó” nullázás függőleges elemköteg esetén hasznos, a „bal” / „jobb” nullázás vízszintes soroknál (általában). De ... ez a módszer attól függ, hogy maga osztályokat ad hozzá a HTML-hez. Az álszelektorok jobb, kevésbé tolakodó módszerek lehetnek:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Érdemes az * igény szerint specifikusabb választókkal helyettesíteni az igényeit.
„Minden harmadik” stb.
Mondjuk, hogy 9 elemből álló lebegő blokk volt, 3-szor 3-mal. Nagyon gyakori, hogy el kell távolítania a jobb margót a 3., 6. és 9. elemről. Az n-ik gyermek álválasztó segíthet ott:
* > :nth-child(3n+3) ( margin-right: 0; )Az ottani 3n + 3 egyenlet így működik:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
stb.
jQuery
A jQuery a CSS3 szelektorokat használja, amelyek a következőket tartalmazzák: first-child,: last-child és: nth-child (). Ez azt jelenti, hogy azokban a böngészőkben, amelyek nem támogatják vagy nem támogatják teljes mértékben ezeket a választókat, működni fognak a jQuery-ben, így a CSS-támogatást lecserélheti JavaScript-támogatásra. Például:
$("* > :nth-child(3n+3)").css("margin-right", 0);Böngésző támogatás
: first-child és: last-child az összes nagyobb böngésző legújabb kiadásában működik, de az IE 6-ban nem: az first-child az IE 7+ verzióban támogatott. : Az n-dik gyermek a Safari 3+, a Firefox 3.5 és a Chrome 1+ verzióiban működik, de mégsem működik az IE8-ban.
Lásd még David Oliver cikkét.