Tutoriales en la Web

Pseudo-clases en CSS 3

Posteado el 26. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

Uno de los puntos donde CSS3 hace grandes incorporaciones es en las pseudo-clases. Gracias a las nuevas pseudo-clases tendremos un control mucho más ajustado de los elementos html.

Consejo: Ya que Internet Explorer 6-8 no soporta la mayoría de pseudo-clases se han desarrollado algunas librerías de javascript que realizan las mismas funciones para estos navegadores. La que mejores resultados me ha dado ha sido select[ivizr]

A continuación la explicación en detalle de cada una de ellas.

:nth-child(N).

Selecciona los elementos en base a sus posiciones en una lista de elementos hijos dentro de un elemento padre. N es el número de la posición.

Code block

/*Selecciona los elementos impares de la clase .nthchild*/ 
.nthchild:nth-child(odd){ 
   color:red; 
}

:nth-last-child(N).

Selecciona los elementos tomando de referencia el último elemento de una lista. N es el número de posición desde el último elemento, donde el valor 1 equivaldría al último.

Code block

/*Selecciona el penúltimo elemento de la clase .nthlastchild*/ 
.nthlastchild:nth-last-child(2){ 
   color:blue; 
}

:nth-of-type(N).

Selecciona los elementos de un tipo concreto dentro de los hijos de un elemento padre.

Code block

/*Selecciona los párrafos pares dentro de una capa*/        
 div>p:nth-of-type(even){ 
   color:red; 
}

• :nth-last-of-type(N). Igual que el anterior tomando como referencia el último elemento de la lista.
• :last-child. Selecciona el último elemento de la lista de elementos hijos. Sería el análogo al :first-child de CSS2 y es equivalente a :nth-last-child(1).
• :first-of-type. Selecciona el primer elemento de un tipo concreto dentro de la lista de hijos.

Code block

/*Selecciona el primer párrafo dentro de una capa*/ 
div>p:first-of-type{ 
   font-style:italic; 
}

:last-of-type.

Selecciona el último elemento de un tipo.

Code block

/*Selecciona el último párrafo dentro de una capa*/ 
div>p:last-of-type{ 
   font-style:italic; 
}

Code block

/*Selecciona los h3 que no pertenezcan a la clase .rojo*/ 
h3:not(.rojo){ 
   font-style:italic; 
}

Articulos relacionados:

Tags: css3, html5