Cómo funciona la pseudoclase target en CSS

Autor: | Última modificación: 13 de junio 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.

¿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, 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 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.

¿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]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software 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! 

¿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!