La pseudo-clase :first-child agrega estilo sólo al primer elemento de cierto tipo, contenido dentro de otro. Por ejemplo, si una lista (UL) contiene varios items (LI), podemos hacer que el primero de ellos se muestre diferente del resto:
<style>
ul.ejemplo1 { ....... }
ul.ejemplo1 li { ....... }
ul.ejemplo1 li:first-child { background-color: #789; color:#000;}
</style>

<ul class="ejemplo1">
<li>el primer item</li>
<li>el segundo item</li>
<li>el tercer item</li>
<li>el último item</li>
</ul>
  • el primer item
  • el segundo item
  • el tercer item
  • el último item

Lo mismo podría hacerse con cualquier otra etiqueta, por ejemplo, DIVs:
<style>
div.ejemplo2 { ....... }
div.ejemplo2 div { ....... }
div.ejemplo2 div:first-child { background-color: #ABC;color:#000; text-align:center; }
</style>

<div class="ejemplo2">
<div> ... este es el primero y será diferente del resto ... </div>
<div> ....... </div>
<div> ....... </div>
<div> ....... </div>
</div>
Pellentesque turpis sapien, aliquam interdum fringilla non, convallis vel justo? Vestibulum sit amet purus nibh.
Donec id orci viverra ipsum interdum facilisis id commodo est. Praesent in feugiat justo. Maecenas odio leo, sagittis rhoncus tincidunt id, convallis at libero.
Phasellus eros erat, ultrices nec feugiat vel, dignissim ut massa.
Aliquam erat volutpat. Duis elementum convallis rhoncus.

La pseudo-clase :first-child funciona en cualquier navegador pero, con el CSS3 se han agregado muchas más que aún no funcionan en Internet Explorer pero, que igual vale la pena conocer.

:last-child es similar a la anterior excepto que hace lo inverso; con ella, seleccionamos el último elemento en lugar del primero.
ul.ejemplo3 li:last-child { background-color: #789; color:#000;}
  • el primer item
  • el segundo item
  • el tercer item
  • el último item

También se han agreado otras que, en realidad, son variantes tales como :first-of-type, :last-of-type, :only-child, :only-of-type [más información]

Una última muy interesante es la llamada pseudo-clase de negación; con ella, podemos definir una serie de propiedades genéricas y excluir algunos elementos.

Un ejemplo podría ser un DIV que tienen imágenes, a todas ellas les ponemos propiedades pero queremos que algunas de ellas tengan un borde diferente del resto. Hasta ahora, esto, es algo que podríamos hacer de este modo:
<style>
div.ejemplo4 { ....... }
div.ejemplo4 img { border: 2px solid #ABC; }
div.ejemplo4 img.conborde { border: 2px solid #F00; }
</style>

<div class="ejemplo4">
<img src="URL_imagen1" class="conborde" />
<img src="URL_imagen2" />
<img src="URL_imagen3" class="conborde" />
<img src="URL_imagen4" />
</div>
Todas las imágenes tienen un borde celeste excepto las que sean de la clase conborde que tendrán un borde rojo.

La pseudo-clase :not nos permite hacer lo contrario:
<style>
div.ejemplo4 { ....... }
div.ejemplo4 img { border: 2px solid #F00; }
div.ejemplo4 img:not(.conborde)  { border: 2px solid #ABC; }
</style>
Todas las imágenes tienen un borde rojo excepto las que que sean de la clase conborde que tendrán un borde celeste.

10 comentarios:

Manfenix  

Muy útil a la hora de automatizar acciones.
Recuerdo que en una entrada (en este año :D) hablabas sobre como, mediante un array, se podía dar color a una o mas elementos de una lista u frases... la he buscado pero no encuentro esa entrada. Te acuerdas JMiur de ella? :S

Responder
Gem@  

Mira que bien ¿de dónde rescataste esa pseudo-idea? es algo que no había visto nunca :)

Responder
Balthazar!  

Hola Jmiur, como siempre gracias antes que todo por tus ayudas jejejej =P, en fin... te comento para ver si me puedes ayudar... es que pensaba utilizar lo que comentas en ésta entrada para darle un diseño particular a la primera imagen que utilizo en mis entradas pero el diseño se me aplica a las dos... y no a la primera o a la última.. y quería saber si sabes como hacerlo... jejej =P!

Saludos! ^^

Responder
JMiur  

Manfenix:
No recuerdo eso ¿No sería esta entrada que habla de la propiedad nth child?

Gem@:
La verdad, este no recuerdo donde lo vi pero, seguramente fue en Mozilla porque allí es donde suelo espiar :D

Balthazar:
Tendría que ver tu ejemplo para tratar de saber donde está el error.

Responder
Raúl  

Deseo dar dinamismo a mi web para registrar usuarios y que estos puedan crar sus propios blog y mantenerlos `pero, con un contenido temático específico aprobado por el web master.

gracias raúl

Alberto Llusan  

xDDDDDDD

esto debe ser un chiste, ¿no?

Responder
Raúl  

deseo agregar comentarios ami web
me ayudas?

Responder
JMiur  

Raul: Para lo primero, necesitas algún hosting y algún sistema que permita hacerlo; para eso, Blogger no servirá.

Responder
Jabba  

[ironía]Hola JMiur, yo deseo crear un edificio de 35 pisos con 3 ascensores exteriores y vistas al mar, y dar dinamismo a los inquilinos con unas pistas exteriores de tenis, gimnasio y un par de piscinas. ¿Me ayudas?[/ironía]

Jejeje, sólo bromeaba :) espero que Raúl no se lo tome a mal, pero sus comentarios han inspirado mis carcajadas :P

Responder
JMiur  

Sin comentarios :X :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