En ocasiones, puede ser conveniente eliminar el margen superior o izquierdo del primer elemento de un contenedor. Del mismo modo, el margen derecho o inferior del último elemento de un contenedor. Puede hacer esto aplicando clases manualmente al HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )La puesta a cero "superior" / "inferior" es útil con una pila vertical de elementos, la puesta a cero "izquierda" / "derecha" es útil para filas horizontales (en general). Pero ... este método depende de que usted mismo agregue clases al HTML. Los pseudo-selectores pueden ser una forma mejor y menos intrusiva de hacerlo:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Es posible que desee reemplazar el * con selectores más específicos según sus necesidades.
"Cada tercio", etc.
Supongamos que tiene un bloque flotante de 9 elementos, 3 por 3. Es muy común que necesite eliminar el margen derecho de los elementos 3, 6 y 9. El pseudo-selector de n-ésimo hijo podría ayudar allí:
* > :nth-child(3n+3) ( margin-right: 0; )La ecuación allí, 3n + 3, funciona así:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
etc.
jQuery
jQuery usa selectores CSS3, que incluyen: first-child,: last-child y: nth-child (). Esto significa que en los navegadores que no son compatibles o no son totalmente compatibles con estos selectores, FUNCIONARÁN en jQuery, por lo que puede sustituir el soporte CSS por JavaScript. Por ejemplo:
$("* > :nth-child(3n+3)").css("margin-right", 0);Soporte de navegador
: first-child y: last-child funcionan en la última versión de todos los navegadores principales, pero no en IE 6.: first-child es compatible con IE 7+. : nth-child funciona en Safari 3+, Firefox 3.5+ y Chrome 1+, pero aún no funciona en IE8.
Vea también el artículo de David Oliver.