CSS Pseudo Clases
Efectos especiales para los enlaces de tu sitio.
Las pseudo-clases
Las pseudo-clases clasifican elementos con características distintas del nombre, atributo o contenido.
Las pseudo-clases pueden ser dinámicas, en el sentido que un elemento puede adquirir o perder una pseudo clase cuando el usuario interactúa en la página web.
Contamos con las siguientes pseudo-clases:
La pseudo-clase :first-child
La pseudo-clase :first-child combina un elemento que es el primer elemento hijo con otro elemento
Sintaxis
Esta regla nos indica que el selector es el primer hijo del elemento padre y que cumplirá con la propiedad incluida entre llaves
<style="type:text/css">
elemento padre > selector:first-child {propiedad: valor}
</style>
</head>
Ejemplo |
|
Vamos a ver como actúa first-child. |
|
|
Código
<head><style type="text/css"> div > p:first-child {color: red} </style> </head> <body> <div> <p>La propiedad definida anteriormente se cumplirá solamente para el primer elemento p que desciende del elemento div</p> <p>En este caso, la propiedad no tendrá efecto por no ser el primer elemento p del elemento div sino el segundo</p> </div> </body> |
Resultado
La propiedad definida anteriormente se cumplirá solamente para el primer elemento p que desciende del elemento div En este caso, la propiedad no tendrá efecto por no ser el primer elemento p del elemento div sino el segundo |
En este caso la propiedad se cumple para el elemento que es descendiente del selector.
<style="type:text/css">
selector:first-child elemento {propiedad: valor}
</style>
</head>
Ejemplo |
|
Otro ejemplo de first-child. |
|
|
Código
<head><style type="text/css"> h4:first-child em {color: red} </style> </head> <body> <h4>La propiedad definida anteriormente se cumplirá <em>solamente con el elemento em dentro del elemento h4</em></h4> <p>En este caso, la propiedad <em> no tendrá efecto</em> ya que el elemento em no desciende del elemento h4 sino del elemento p</p> </div> </body> |
Resultado
La propiedad definida anteriormente se cumplirá solamente con el elemento em dentro del elemento h4En este caso, la propiedad no tendrá efecto ya que el elemento em no desciende del elemento h4 sino del elemento p |
Los enlaces y las pseudo-clases :link y :visited
Las pseudo-clases :link y :visited se usan generalmente para diferenciar entre un enlace que aún no ha sido visitado por otro que ya fue activado. Para ello definimos 2 colores distintos para cada caso.
Sintaxis
<style="type:text/css">
selector:link {text-align: valor}
selector:visited {text-align: valor}
</style>
</head>
Ejemplo |
|
Veamos como se comporta el enlace. |
|
|
Código
<head><style type="text/css"> a:link {color:red} a:visited {color:green} </style> </head> <body> <a href="/fin.html">Si presiona el enlace cambiará al color verde</a>. </body> |
Resultado
Si presiona el enlace cambiará al color verde
|
Las pseudo-clases dinámicas :hover, :active y :focus
A veces necesitamos cambiar la forma de visualizar o interpretar algún objeto en respuesta a una acción del usuario. La pseudo-clase :hover se aplica generalmente cuando el cursor se desplaza por encima de un enlace.
La pseudo-clase :active se aplica cuando el elemento está siendo activado por el usuario, como por ejemplo cuando el usuario presiona un boton.
La pseudo-clase :focus se aplica cuando el elemento tiene el foco
Sintaxis
<style="type:text/css">
a:link { color: red }
a:visited { color: blue }
selector:hover {propiedadvalor}
selector:active {propiedadvalor}
selector:focus {propiedadvalor}
</style>
</head>
Nota: la pseudo-clase :hover debe ser ubicada posteriormente a :link y :visited y anteriormente a :active.
Ejemplo |
|
Vamos a aplicar un comportamiento dinámico a un enlace. |
|
|
Código
<head><style type="text/css"> a:link { color: red } a:visited { color: green} a:hover {color:blue} a:active {color:black} a:focus {background-color:yellow} </style> </head> <body> <a href="/fin.html">Enlace dinámico</a> </body> |
Resultado
Enlace dinámico
|
La pseudo-clase del idioma :lang
La pseudo-clase :lang nos permite combinar el idioma de los elementos del documento con el idioma del usuario
Sintaxis
<style="type:text/css">
selector:lang(idioma) {propiedadvalor}
O
:lang(idioma) {propiedadvalor}
</style>
</head>
Nota: el idioma es obligatorio.
Ejemplo |
|
Vamos a comparar las comillas entre dos idiomas. |
|
|
Código
<head><style type="text/css"> :lang(es) {quotes:'"' '"'} :lang(fr) {quotes:"<<" ">>"} </style> </head> <body> <p>...<q lang="es">Comillas en español</q>...</p> <p>...<q lang="fr">Comillas en francés</q>...</p> </body> |
Resultado
... ... |
Propiedades de las pseudo clases
| Propiedad | Descripción | Ej. |
|---|---|---|
| :first-child | Cuando es el primer hijo de un elemento padre. |  |
| :link | Enlaces no visitados. | |
| :visited | Enlaces visitados. | |
| :active | Cuando es activado(tiempo entre que se pulsa un botón sobre él y se suelta). | |
| :hover | Cuando se posiciona el cursor sobre él pero no se activa. | |
| :focus | Cuando tiene el foco posicionado sobre él. | |
| :lang | Especifica el lenguaje usado en el elemento. | |
<<< Ubicación de los elementos Pseudo Elementos de CSS >>>