Comunidad de diseño web y desarrollo en internet online

Pseudo-clases en CSS 3

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.