Usando first-child y last-child

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