Cómo funciona la pseudoclase target en CSS

Autor: | Última modificación: 28 de diciembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post: ,

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

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!