Cómo funciona la pseudoclase target en CSS

Autor: | Última modificación: 11 de mayo de 2023 | Tiempo de Lectura: 2 minutos
Temas en este post: ,

Algunos de nuestros reconocimientos:

Premios KeepCoding

Hay muchos momentos en el diseño de una página web en los que querremos modificar la apariencia de un elemento HTML específico. En este post, te presentaremos cómo funciona la pseudoclase target en CSS y cómo utilizarla para resaltar o revelar elementos usando los estilos de CSS.

¿Qué es una pseudoclase?

Las pseudoclases son palabras clave que podemos añadir a los selectores para identificar un estado en nuestros elementos HTML. Esto quiere decir que los podemos insertar cuando queremos estilizar un elemento que se encuentre en un estado específico. Por ejemplo, podemos hacer que un botón tenga un estilo diferente cuando el ratón pasa encima de él. Esto lo logramos usando la pseudoclase :hover. Así pues, a continuación te contaremos acerca de la pseudoclase target.

¿Qué es y cómo funciona la pseudoclase target en CSS?

La pseudoclase :target en CSS nos permite seleccionar y estilizar un elemento único que tiene como atributo ID una palabra que coincide con el fragmento de la URL. Un fragmento de URL es el pedazo de un enlace que empieza con el símbolo hashtag (#).

Esto quiere decir que, al poner el selector :target en css, estamos seleccionando los elementos que tienen como atributo ID el fragmento de URL de su enlace. La pseudoclase target en CSS tiene como función principal resaltar los elementos a los que lleva un enlace. Si tenemos, por ejemplo, un menú con las distintas partes de un artículo, la pseudoclase target en css nos permite estilizar estas secciones de un modo diferente para que se resalten cuando se seleccionen dentro del menú.

Las propiedades clásicas con las que se estiliza la pseudoclase target en CSS son shadow-box, background-color y font-style. Con estas propiedades podemos resaltar bloques o textos para que el usuario sepa qué sección eligió y en dónde debe empezar a leer. Te invitamos a ver los ejemplos de la MDN para entender cómo se escribe esta pseudoclase y cómo se ven sus resultados con la pseudoclase target en css.

¿Te animas a seguir aprendiendo?

Después de leer este post y aprender cómo funciona la pseudoclase target en CSS, ¿tienes ganas de seguir aprendiendo sobre este poderoso lenguaje de diseño web? ¡En KeepCoding tenemos el bootcamp intensivo perfecto para ti! En el Desarrollo Web Full Stack Bootcamp aprenderás, entre muchas otras cosas, cómo utilizar HTML y CSS para crear y diseñar tu propia página web de la mano de nuestros increíbles y experimentados profesores. ¿A qué esperas para seguir aprendiendo y cumplir tu sueño de ser un desarrollador web? ¡Anímate a matricularte y conviértete en un experto del sector IT!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado