Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Hover Link - Pseudo Class en CSS - Virtualnauta.com - Tutorial CSS

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:

  1. :first-child
  2. Para enlaces :link y :visited
  3. Dinámicas :hover, :active y :focus
  4. Lenguaje :lang

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

<head>
<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.

<head>
<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 h4

En 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

<head>
<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

<head>
<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

<head>
<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

...Comillas en español...

...Comillas en francés...


Propiedades de las pseudo clases

PropiedadDescripciónEj.
:first-child Cuando es el primer hijo de un elemento padre. Ejemplo de como se usa la pseudo clase :first-child
:link Enlaces no visitados. Ejemplo de como definir el color de un enlace no visitado
: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. Ejemplo de como cambiar el color de fondo de un enlace cuando se hace foco sobre él
:lang Especifica el lenguaje usado en el elemento. Ejemplo de como definir dos tipos de comillas por medio de :lang


<<< Ubicación de los elementos Pseudo Elementos de CSS >>>

En la Web