LM | DÍA 11: PSEUDO-CLASES

Día 11. En el día de hoy, hemos visto los diferentes tipos de pseuo-clases con los que vamos a trabajar. Además, los hemos puesto en práctica posteriormente para poder ver de una mejor forma, su uso dentro de nuestro desarrollo de una página web. 

Derechos de autor aquí

Pseudo-clases: 

Las pseudo-clases se utilizan para seleccionar elementos en función del comportamiento del usuario. Veamos los diferentes tipos de pseudo-clases:

• :link: se aplica a los enlaces que nunca han sido visitados
• :visited; se aplica a los enlaces que ya han sido visitados en alguna ocasión
• :hover: se aplica a un elemento seleccionado por el usuario pero sin activarlo, es decir, cuando pones el ratón sobre el enlace sin aún seleccionarlo. 
• :active: se aplica a los elementos que están siendo activados, es decir, durante el tiempo que pasa realizando la acciónd de clicar en un enlace. 
• :focus: se aplica a un elemento que tiene el foco, como por ejemplo, un cuadro de entrada en un formulario. 

Sintaxis de estos pseudo-clases

• a:link { color: black; }
• a:visited { color: blue; }
• a:hover { color: green; }
• a:active { color: red; }
• a:focus { background-color: yellow; }+

Llevando las pseudo-clases a la práctica: 

Imagen sacada de una prueba realizada por el autor de este blog

Pseudo-elementos:

Veamos los diferentes tipos de pseudo-elementos con los que vamos a trabajar:

• :first-line: se aplica a la priemra línea de texto
• :first-letter: se aplica a la primera letra de un texto
• :before: sirve para genera texto antes del contenido de un elemento
• :after: sirve para generar texto después del contenido de un elemento