: objetivo - Trucos CSS | Almanaque CSS 2024

El :targetpseudo selector en CSS coincide cuando el hash en la URL y la identificación de un elemento son iguales. Por ejemplo, si la URL actual es:

https://css-tricks.com/#voters

Y esto existía en el HTML:

 Content

Este selector coincidiría con:

:target ( background: yellow; )

Y ese sectionelemento tendría un fondo amarillo.

Con ese genérico de un selector (que coincide con cualquier cosa que resulte ser el objetivo), si la URL cambia para terminar en #faqy hay otro elemento con un ID de faq, ese selector volverá a coincidir y el #faqelemento tendrá un fondo amarillo.

Puede limitarlo siendo específico sobre los elementos a los que desea dirigirse, como

#voters:target ( )

¿Cuándo usarías esto?

Una posibilidad es cuando quieres estilo con "estados". Cuando la página tiene un determinado hash, está en ese estado. No es tan versátil como manipular nombres de clases (ya que solo puede haber uno y solo puede estar relacionado con un elemento) pero es similar. Cualquier cosa que pueda hacer para cambiar una clase para cambiar el estado puede hacer cuando el elemento está en :target. Por ejemplo: cambiar colores, cambiar de posición, cambiar imágenes, ocultar / mostrar cosas, lo que sea.

Usaría estas reglas generales para cuando :targetsea una buena opción:

Cuando se necesita un "estado"
Cuando el comportamiento del enlace de salto hacia abajo / hash es aceptable
Cuándo es aceptable afectar el historial del navegador

¿Cómo se obtienen los hash en las URL?

La forma más común es que un usuario haga clic en un enlace que incluye un hash. Podría ser un enlace interno (en la misma página) o una URL totalmente calificada que termina con un hash y un valor. Ejemplos:

Go To There Go To There

Comportamiento de salto

Independientemente de si es un enlace de la misma página o no, el comportamiento del navegador es desplazarse por la página hasta que ese elemento esté en la parte superior de la página . O tan lejos como pueda si no puede desplazarse tan lejos. Es muy importante saberlo, porque significa que explotar este comportamiento "declarado" es un poco complicado / limitado.

Por ejemplo, una vez probé una variedad de técnicas para replicar pestañas CSS funcionales, pero finalmente decidí que usar el truco de la casilla de verificación era una mejor idea porque evita los problemas de salto de página. Ian Hansson de CSS Science también tiene algunos ejemplos de pestañas. Su tercer ejemplo utiliza :targetelementos absolutamente posicionados ocultos sobre la parte superior de la página para evitar el comportamiento de salto de página. Es inteligente, pero una solución perfecta en general, porque eso significaría que la página saltaría hacia arriba si las pestañas estuvieran más abajo en una página.

Más información

Artículo aquí sobre CSS-Tricks: On: target
Selectores de especificaciones de nivel 4
Una galería de imágenes simple usando: target (sufre del salto de página, buen ejemplo de eso) por Chris Heilmann
Demostración de la técnica de desvanecimiento amarillo (aunque para contenido existente, no para contenido recién agregado) de Web Designer Notebook.
Un CSS Target, literalmente, de Caleb Ogden.
CSS: objetivo para diseños fuera de la pantalla
Documentos MDN