pseudo selector :first-child y :last-child

Desde que comencé a utilizar CSS y HTML Semántico para maquetar los sitios que desarrollamos, he sabido de algunos pseudo selectores CSS. Uno de los más utilizados es :hover, que permite hacer efectos de rollover (cambiar algunos atributos cuando se le pasa el mouse por arriba) sobre elementos.

Hay otros pseudo selectores más pero, honestamente, no me animaba a utilizarlos por miedo a como serían soportados en Internet Explorer. Ahora que Internet Explorer 6 quedó en el lejano pasado, y puedo tranquilamente dejar de darle soporte, comencé a experimentar con otros selectores.
Una estructura que se me presenta muy seguido es tener una lista que utilizo como menú. El código suele ser en lineas generales algo como:

<styles>
#menu { list-style: none; }
#menu li { float: left; margin-right: 10px; }
#menu li.ultimo { margin-right: 0px; }
</styles>

<ul id="menu">
    <li>Primer ítem</li>
    <li>Ítem dos</li>
    <li class="ultimo">Último ítem</li>
</ul>

Lo que no me gusta de este fragmento, es el tener que utilizar el class ultimo. Cuando el código es algo más complicado que simplemente un menú escrito estáticamente, sino que estos pueden variar en cantidad dependiendo una base de datos, el código para agregar ese class=”ultimo” no queda muy agradable y ensucia el código, por lo que sería ideal no tener que agregar lógica adicional para detectar cuando es el último item de una lista, o cualquier otro tipo de estructura.

Ahí entran dos pseudo selectores, que recién ahora comienzo a usar. Estos son :first-child y :last-child

Lamentablemente, Internet Explorer 7 y 8, solamente reconocen :first-child, por lo que debemos pensar, a la hora de maquetar, en hacerlo al revez, o sea en lugar de poner un margen a la izquierda para separar, y al ultimo quitarle el margen, tendremos que poner un margen a la izquierda y quitar el primero.

Utilizando este pseudo selector, el código html quedaría como:

<styles>
#menu { list-style: none; }
#menu li { float: left; margin-left: 10px; }
#menu li:first-child { margin-left: 0px; }
</styles>

<ul id="menu">
    <li>Primer ítem</li>
    <li>Ítem dos</li>
    <li>Último ítem</li>
</ul>

Entiendo que no hay mucho cambio, y en la mayoría de los casos hasta es irrelevante si lo hago de una forma u otra, pero me ha solucionado algunos problemas de visualización de forma muy simple, sin tener que agregar clases sin sentido (aprecio mucho el html semántico!) y sin escribir código en el servidor innecesario para detectar la primera o última iteración de un bucle.

Siempre recordar usar first-child ya que si usamos last-child será totalmente ignorado por Internet Explorer (al menos en sus versiones 7 y 8 que aún se usan y no pueden ser tan fácilmente ignoradas)


Discussion Area - Leave a Comment