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;}
-
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
|
Ejemplo
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;
|
Para saber más
