Las pseudo-clases de CSS son de gran importancia a la hora de cuidar los detalles de una web, ya que son un paso más en la personalización de una plantilla.
El concepto en sí es más difícil de explicar que de implementar. Las pseudo-clases se utilizan para personalizar elementos a los que no se puede acceder con las clases normales y que dependen de una principal. Lo mejor es verlas directamente explicando para qué sirve cada una y su sintaxis.
first-child
Es una pseudo-clase que va orientada a personalizar el primer elemento hijo de cualquier otro elemento. Por ejemplo, si tenemos un div y queremos aplicar estilos al primer párrafo de su interior.
.ejemplo p:first-child{
font-size:90px;
}
<div class="ejemplo">
<p>texto a 90px</p>
</div>En este caso, cuando un primer elemento hijo de la clase ejemplo sea un párrafo, el tamaño de la fuente será 90px. Sin embargo, si el primer elemento no es una p, no se aplicará la pseudo-clase.
link
Para aplicar estilo a los enlaces del portal que no han sido aún visitados podemos usar :link. De este modo los enlaces se distinguirán y sirven a modo de historial para el usuario.
a:link{
color:#000000;
}El ejemplo mostrará los enlaces que aún no han sido visitados de color negro.
visited
Por contra al anterior, :visited se usa para referirse a los vínculos ya visitados por el usuario. Esto ayudará a la usabilidad, sobre todo cuando hay gran cantidad de contenido segmetado entre los enlaces.
a:visited{
color:#ffffff;
}Así pues, los enlaces se verán blancos una vez visitados, pudiendo distinguirse con mayor facilidad.
hover
Esta pseudo-clase se aplica para el estado de un elemento cuando tienes el cursor encima, el clásico roll over.
a:hover{
text-decoration:none;
}Esto hará que al pasar el ratón por encima, el enlace pierda el subrayado típico de los vínculos. Pero hay que comentar que :hover se puede aplicar a cualquier elemento, además de los enlaces.
active
Mientras tenemos presionado del botón del ratón sobre un elemento, podemos definir que propiedades adoptará en ese instante.
a:active{
font-weight:bolder;
}Al presionar, la fuente pasará a verse en negrita y al soltar, volverá a su estado normal.
focus
Cuando un elemento tiene el foco, es decir se encuentra activo, bien a través del teclado, bien a través del ratón, podemos definir también sus características.
input:focus{
border:1px solid #ffffff;
}Cuando el input tenga el foco, el borde será de 1px, sólido y blanco. Una pseudo-clase que usaremos en la mayoría de los casos para darle un poco más de atractivo a los formularios.
Estas tres últimas, :hover, :active y :focus, se denominan pseudo-clases dinámicas de CSS, al requerir que el usuario interactúe con ellas.
lang
Sirve para aplicar estilos en función del idioma de un elemento. De este modo podemos variar los estilos según el lenguaje utilizado.
p:lang(es){
color:#000000;
}En el ejemplo, si el párrafo está en español se mostrará en negro. El problema viene al intentar determinar el lenguaje del texto, ya que el idioma se especifica en el head, lo que se aplica al documento entero. Habría que recurrir a añadir el idioma directamente en la etiqueta a través de HTML.
<p lang="es"> texto en español </p>Para terminar, si quieres ampliar conocimientos sobre el tema, puedes leer nuestro artículo sobre los distintos tipos de selectores de CSS que existen y cuál es su utilidad.
Deja una respuesta