A veces puede ser deseable eliminar el margen superior o izquierdo del primer elemento de un contenedor. Asimismo, 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.
Digamos que tenía 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 nth-child 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: primer hijo,: último hijo y: n-ésimo hijo (). Esto significa que en los navegadores que no admiten o no admiten completamente estos selectores, FUNCIONARÁN en jQuery, por lo que puede sustituir la compatibilidad con CSS por compatibilidad con JavaScript. Por ejemplo:
$("* > :nth-child(3n+3)").css("margin-right", 0);Compatibilidad con navegador
:first-child y :last-child funcionan en la última versión de todos los principales navegadores, 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.
Véase también el artículo de David Oliver.