Czasami może być pożądane usunięcie górnego lub lewego marginesu z pierwszego elementu w pojemniku. Podobnie, prawy lub dolny margines od ostatniego elementu w kontenerze. Możesz to zrobić, ręcznie stosując klasy do kodu HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Zerowanie „góra” / „dół” jest przydatne przy pionowym stosie elementów, zerowanie „lewo” / „prawo” jest przydatne dla poziomych rzędów (ogólnie). Ale… ta metoda zależy od tego, czy sam dodajesz klasy do kodu HTML. Pseudo-selektory mogą być lepszym, mniej inwazyjnym sposobem:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Możesz zastąpić * bardziej szczegółowymi selektorami zgodnie ze swoimi potrzebami.
„Co trzeci” itp.
Powiedzmy, że masz pływający blok składający się z 9 elementów, 3 na 3. Bardzo często może być konieczne usunięcie prawego marginesu z trzeciego, szóstego i dziewiątego elementu. Może w tym pomóc pseudoselektor n-tego dziecka:
* > :nth-child(3n+3) ( margin-right: 0; )Tam równanie 3n + 3 działa tak:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
itd.
jQuery
jQuery używa selektorów CSS3, które obejmują: first-child,: last-child i: nth-child (). Oznacza to, że w przeglądarkach, które nie obsługują lub nie obsługują w pełni tych selektorów, BĘDĄ one działać w jQuery, więc możesz zastąpić obsługę CSS obsługą JavaScript. Na przykład:
$("* > :nth-child(3n+3)").css("margin-right", 0);Wsparcie przeglądarki
: first-child i: last-child działają w najnowszym wydaniu ze wszystkich głównych przeglądarek, ale nie w IE 6.: first-child jest obsługiwane w IE 7+. : nth-child działa w Safari 3+, Firefox 3.5+ i Chrome 1+, ale nadal nie działa w IE8.
Zobacz także artykuł Davida Olivera.