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