CSS - Pseudo clases
Las pseudoclases de CSS se utilizan para agregar efectos especiales a algunos selectores. No es necesario utilizar JavaScript ni ningún otro script para utilizar esos efectos. Una sintaxis simple de pseudo-clases es la siguiente:
selector:pseudo-class {property: value}Las clases CSS también se pueden usar con pseudoclases:
selector.class:pseudo-class {property: value}Las pseudoclases más utilizadas son las siguientes:
| No Señor. | Valor y descripción |
|---|---|
| 1 | :link Utilice esta clase para agregar un estilo especial a un enlace no visitado. |
| 2 | :visited Utilice esta clase para agregar un estilo especial a un enlace visitado. |
| 3 | :hover Use esta clase para agregar un estilo especial a un elemento cuando pase el mouse sobre él. |
| 4 | :active Utilice esta clase para agregar un estilo especial a un elemento activo. |
| 5 | :focus Utilice esta clase para agregar un estilo especial a un elemento mientras el elemento tiene el foco. |
| 6 | :first-child Utilice esta clase para agregar un estilo especial a un elemento que es el primer hijo de algún otro elemento. |
| 7 | :lang Use esta clase para especificar un idioma para usar en un elemento específico. |
Al definir pseudoclases en un bloque <style> ... </style>, se deben tener en cuenta los siguientes puntos:
a: hover DEBE ir después de un: enlace y un: visitado en la definición de CSS para que sea efectivo.
a: active DEBE ir después de a: hover en la definición de CSS para que sea efectivo.
Los nombres de pseudoclase no distinguen entre mayúsculas y minúsculas.
La pseudoclase es diferente de las clases CSS pero se pueden combinar.
La pseudoclase: link
El siguiente ejemplo demuestra cómo utilizar la clase : link para establecer el color del enlace. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Black Link</a>
</body>
</html>Producirá el siguiente enlace negro:
La: pseudoclase visitada
El siguiente es el ejemplo que demuestra cómo usar la clase : visitado para establecer el color de los enlaces visitados. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = "">Click this link</a>
</body>
</html>Esto producirá el siguiente enlace. Una vez que haga clic en este enlace, cambiará su color a verde.
La pseudoclase: hover
El siguiente ejemplo demuestra cómo usar la clase : hover para cambiar el color de los enlaces cuando colocamos el puntero del mouse sobre ese enlace. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Bring Mouse Here</a>
</body>
</html>Producirá el siguiente enlace. Ahora coloca el mouse sobre este enlace y verá que cambia su color a amarillo.
La: pseudoclase activa
El siguiente ejemplo demuestra cómo utilizar la clase : active para cambiar el color de los enlaces activos. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Click This Link</a>
</body>
</html>Producirá el siguiente enlace. Cuando un usuario hace clic en él, el color cambia a rosa.
La pseudoclase: focus
El siguiente ejemplo demuestra cómo usar la clase : focus para cambiar el color de los enlaces enfocados. Los valores posibles pueden ser cualquier nombre de color en cualquier formato válido.
<html>
<head>
<style type = "text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href = "">Click this Link</a>
</body>
</html>Producirá el siguiente enlace. Cuando este enlace se enfoca, su color cambia a naranja. El color vuelve a cambiar cuando pierde el enfoque.
La pseudoclase del primer hijo
La pseudoclase: first-child coincide con un elemento especificado que es el primer hijo de otro elemento y agrega un estilo especial a ese elemento que es el primer hijo de algún otro elemento.
Para que: el primer hijo trabaje en IE <! DOCTYPE> debe declararse en la parte superior del documento.
Por ejemplo, para sangrar el primer párrafo de todos los elementos <div>, puede usar esta definición:
<html>
<head>
<style type = "text/css">
div > p:first-child {
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>Producirá el siguiente resultado:
La pseudoclase: lang
La pseudoclase de idioma : lang , permite construir selectores basados en la configuración de idioma para etiquetas específicas.
Esta clase es útil en documentos que deben apelar a varios lenguajes que tienen diferentes convenciones para determinadas construcciones de lenguaje. Por ejemplo, el idioma francés generalmente usa corchetes angulares (<y>) para citar, mientras que el idioma inglés usa comillas ('y').
En un documento que necesita abordar esta diferencia, puede usar la pseudoclase: lang para cambiar las comillas de manera apropiada. El siguiente código cambia la etiqueta <blockquote> de forma apropiada para el idioma que se está utilizando:
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>Los selectores: lang se aplicarán a todos los elementos del documento. Sin embargo, no todos los elementos hacen uso de la propiedad quotes, por lo que el efecto será transparente para la mayoría de los elementos.
Producirá el siguiente resultado: