Il peut parfois être souhaitable de supprimer la marge supérieure ou gauche du premier élément d'un conteneur. De même, la marge droite ou inférieure du dernier élément d'un conteneur. Vous pouvez le faire en appliquant manuellement des classes au HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )La mise à zéro «haut» / «bas» étant utile avec une pile verticale d'éléments, la mise à zéro «gauche» / «droite» étant utile pour les lignes horizontales (en général). Mais… cette méthode dépend de l'ajout de classes au HTML vous-même. Les pseudo-sélecteurs peuvent être une meilleure façon de procéder moins intrusive:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Vous voudrez peut-être remplacer le * par des sélecteurs plus spécifiques selon vos besoins.
«Tous les tiers», etc.
Supposons que vous ayez un bloc flottant de 9 éléments, 3 par 3. Il est très courant que vous deviez supprimer la marge droite des 3e, 6e et 9e éléments. Le pseudo-sélecteur nth-child pourrait être en mesure de vous aider:
* > :nth-child(3n+3) ( margin-right: 0; )L'équation ici, 3n + 3, fonctionne comme ceci:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
etc.
jQuery
jQuery utilise des sélecteurs CSS3, qui incluent: first-child,: last-child et: nth-child (). Cela signifie que dans les navigateurs qui ne prennent pas ou ne prennent pas entièrement en charge ces sélecteurs, ils fonctionneront dans jQuery, vous pouvez donc remplacer le support CSS par le support JavaScript. Par exemple:
$("* > :nth-child(3n+3)").css("margin-right", 0);Prise en charge du navigateur
: first-child et: last-child fonctionne dans la dernière version de tous les principaux navigateurs, mais pas dans IE 6.: first-child est pris en charge dans IE 7+. : nth-child fonctionne dans Safari 3+, Firefox 3.5+ et Chrome 1+, mais ne fonctionne toujours pas dans IE8.
Voir également l'article de David Oliver.