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] que podréis descargar de su página oficial.
A continuación os explico en detalle cada una de ellas con algunos ejemplos.
- :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.
Código :
/*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.
Código :
/*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.
Código :
/*Selecciona los párrafos pares dentro de una capa*/
div>p:nth-of-type(even){
color:red;
}
Con las pseudo-clases, pseudo-elementos y selectores nos convertiremos en verdaderos francotiradores del código.
- :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.
Código :
/*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.
Código :
/*Selecciona el último párrafo dentro de una capa*/
div>p:last-of-type{
font-style:italic;
} - :only-child. Selecciona el elemento si es el único elemento hijo.
- :only-of-type. Selecciona el elemento si es el único elemento hijo de ese tipo.
- :root. Selecciona el elemento raíz del documento.
- :empty. Selecciona los elementos que no tienen hijos.
- :enabled. Selecciona los elementos de la interfaz que tengan un estado de enable.
- :disabled. Selecciona los elementos de la interfaz que tengan un estado disabled.
- :checked. Selecciona los checkboxes o radio buttons que estén activados.
- :not(S). Selecciona los elementos que no coincidan con el selector especificado.
Código :
/*Selecciona los h3 que no pertenezcan a la clase .rojo*/
h3:not(.rojo){
font-style:italic;
}
Podéis ver ejemplos funcionales aquí.
En el próximo capítulo veremos las nuevas opciones que nos da CSS3 para la edición de textos.
Información adicional
® Cristalab 2011
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.