Blog
Te doy la bienvenida a la sección de pseudo-clases, cada vez estamos mas cerca de finalizar el curso, recuerda poner en práctica todas las habilidades aprendidas para que seas un buen programador web. Ahora sigamos con la lección.
¿Qué son las Pseudo-Clases?
Una pseudo-clase se usa para definir un estado especial de un elemento cualquiera.
Puede utilizarse para cambiar el estado de varios elementos, pero puede usarse por ejemplo en:
- Un estilo de algún elemento cuando algún usuario pase el puntero del mouse sobre él
- Puede otorgarle estilos a enlaces visitados y también a enlaces no visitados de una manera diferente
- Rediseña la naturaleza de un elemento cuando el usuario lo enfoca
HTML proporciona pseudo-clases, clases que se definen por defecto y nos permiten aplicar un estilo en cualquiera de ellas:
- Un elemento que se encuentra en un estado específico.
- Un conjunto específico de elementos por su jerarquía, explicado en detalle en la sección de Selectores Avanzados.
Discutiremos lo primero en esta página, y daremos ejemplos para cada pseudo-clase. Tenga en cuenta que no hay forma de incrustar pseudo-clases en CSS.
La sintaxis básica de las pseudo-clases es la siguiente:
selector:pseudo-clase { propiedad:valor; }
Links
Los links o enlaces de una página web pueden poseer uno de dos estados: el estado de un enlace no visitado, o el estado de un enlace que ya ha sido visitado por el usuario. Un enlace no visitado es un enlace en el que no se ha hecho clic anteriormente, y un enlace visitado es un enlace en el que ya se ha hecho clic.
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <style> a.special:link { color: green; } a.special:visited { color: red; } </style> </head> <body> <p><a href="#">Este es un enlace estándar, se volverá púrpura cuando se haga clic en él.</a></p> <p><a class="special" href="#">Este es un enlace de color especial y se vuelve rojo cuando se hace clic en él.</a></p> </body> </html>
Hover (efecto que se obtiene al pasar el puntero del mouse sobre un elemento)
La :hover pseudo-clase de CSS puede ser usado para definir estilos que afecten elementos HTML al momento en el que el usuario pase el puntero del mouse sobre dichos elementos. Con esto puedes conseguir un efecto mas llamativo para los textos, o algún otro elemento que desees resaltar a la vista de tu usuario.
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <style> p:hover { background-color: yellow; } </style> </head> <body> <p>Los párrafos ahora tienen un fondo amarillo al pasar el puntero del ratón sobre ellos. Pruebalo.</p> </body> </html>
Activo y Pasivo
La :active pseudo-clase de CSS, nos define los estilos a utilizar para un elemento en el que se está haciendo clic actualmente. Esto significa que solo cambiará el estilo o naturaleza del diseño del elemento (como la fuente, o el color de un texto, por ejemplo) únicamente cuando ya se haya hecho clic sobre él.
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <style> a:active { font-weight: bold; } </style> </head> <body> <p> <a href="#first">Primera seccion.</a> <a href="#second">Segunda seccion.</a> <a href="#third">Tercera seccion.</a> </p> </body> </html>
Estas pseudo-clases también nos permiten la posibilidad de que al navegar a una sección específica de la página igualmente se pueda cambiar el estilo del elemento que tenemos como destino.
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <style> p:target { font-weight: bold; } </style> </head> <body> <p> <a href="#first">Primera seccion.</a> <a href="#second">Segunda seccion.</a> <a href="#third">Tercera seccion.</a> </p> <p id="first">Este es el texto de la primera sección.</p> <p id="second">Este es el texto de la segunda sección.</p> <p id="third">Este es el texto de la tercera sección.</p> </body> </html>
Enfoque
La pseudo-clase de CSS :focus (o enfoque, en español); define los estilos a utilizar para un elemento que está enfocado. Con esto me refiero a que solo cambiará el diseño de un elemento que estemos utilizando, para darle un atractivo a la página y un toque diferente a su dieño.
<!DOCTYPE html> <html> <head> <title>Ejemplo</title> <style> input:focus { font-weight: bold; } </style> </head> <body> <form> <p><input type="text" value="First field"></p> <p><input type="text" value="Second field"></p> <p><input type="text" value="Third field"></p> </form> </body> </html>
¡Felicitaciones por haber llegado hasta aquí! Continúa aprendiendo con nosotros en nuestro curso de HTML y CSS:
[…] Pseudo-Clases […]