Las  pseudo-clases CSS se utilizan para añadir efectos especiales a algunos selectores. Por ejemplo: si pasamos el ratón por un enlace podemos cambiar su aspecto—

  • Permiten especificar estados de elementos de la página web que no se reflejan en el código HTML.
  • Se declara como:

selector:pseudo-class {propiedad:value;}

  • —seudo-clases:
  • —link: enlace no visitado
  • —visited: enlace visitado
  • —hover: cuando el cursor pasa por encima del elemento
  • —active: cuando se activa el elemento (ej: mientras se pulsa el ratón)
  • —focus: cuando el elemento recibe el foco

 


EjemploEjemplo
ejemplo de sudoclase
 

Nuevas Seudo-clases

  • :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.
/*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.
/*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.
/*Selecciona los párrafos pares dentro de una capa*/        
 div>p:nth-of-type(even){ 
   color:red; 

 

 

Saber másPara saber más

Clic en en la siguiente dirección

http://www.w3schools.com/cssref/css_selectors.asp