JMiur [E]

Dos pseudo-clases muy sencillas de comprender y que nos dan muchas posibilidades son :first-child y :last-child; la segunda, no está implementada en versiones inferiores a IE9 pero la primera funciona en cualquier navegador.

first-child identifica al primer elemento (etiqueta de cierto tipo) dentro de un contenedor
last-child identifica al último elemento

¿Qué significa esto? Es sencillo, por ejemplo, si en un DIV tenemos varias imágenes:
<div class="demo">
  <img src="URL_imagen_1"/> <!-- a esta se identifica con first-child -->
  <img src="URL_imagen_2"/>
  <img src="URL_imagen_3"/>
  <img src="URL_imagen_4"/> <!-- a esta se identifica con last-child -->
</div>
Así que podríamos usar se pseudo-clase para darle estilo a la primera, a la última o a ambas:
<style>
  .demo img:first-child {background-color: #FFF; border: 5px solid #F00; padding: 3px;}
  .demo img:last-child {background-color: #FFF; border: 5px solid #8F8;  padding: 3px;}
</style>

Un ejemplo práctico del uso de esta propiedad se puede probar con las listas. Una lista es una etiqueta UL y sus items son etiquetas LI; si estos últimos tienen un borde inferior que los separa, el primer item se verá "distinto":
<style>
  .demoLISTA {
    list-style-position: inside;
    margin: 0 30px;
    text-align: left;
  }
.demoLISTA li {
    border-bottom: 1px dotted #ABC;
    font-size: 20px;
    list-style-type: disc;
    text-indent: 20px;
  }
</style>
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5

Usando first-child podemos agregarle ese borde al primer elemento:
<style>
.demoLISTA li:first-child {
    border-top: 1px dotted #ABC;
  }
</style>
  • item 1:first-child
  • item 2
  • item 3
  • item 4
  • item 5

O, podemos cambair cualquier otra propiedad del primer item y del último, sabiendo que este último no será aplicado en IE8:
<style>
.demoLISTA li:first-child {
    background-color: #A00;
    border-bottom: none;
    color: #FFF;
    list-style-type: square;
}
.demoLISTA li:last-child {
    color: #FF0;
    list-style-type: square;
  }
</style>
  • item 1 si en IE8
  • item 2
  • item 3
  • item 4
  • item 5 no en IE8

4 comentarios:

Adrián J. Messina  

Buenísimo, esto de primer hijo y último hijo =)

Responder
Graciela  

'Guenísmo' :)

Responder
SignedPSP  

Por eso me gusta tu blog, siempre aprendo cosas nuevas.

No sabía de la existencia de esta pseudo-clase.

Responder
Alexandru Florentin Calin  

Gracias máquina. Estoy muy agradecido por la existencia de Vagabundia :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR