: cualquier enlace - Trucos CSS

Anonim

La :any-linkpseudoclase en CSS proporciona un método para seleccionar elementos que son el ancla de origen de un hipervínculo.

Si el anclaje término fuente se pierde, que es un nombre de fantasía para el href atributo en los elementos HTML , y . (No entiendo por qué necesitarías apuntar a o en CSS, pero bueno). La especificación HTML tiene mucha más información al respecto.

Un elemento que acepta y contiene un hrefatributo es un hipervínculo y se seleccionará con :any-link. Esto se convierte en una forma práctica de seleccionar todos los elementos HTML basados ​​en enlaces que de otro modo podrían parecer no relacionados y sin tocar el marcado. Tal vez existe porque podría pensar :linkque seleccionaría todos los enlaces, pero falla :visited, por lo que esto los agrupa a todos.

Funcionalmente, es como el selector de atributos (href).

Howdy!
:any-link ( color: red; font-weight: 900; text-decoration: none; )

Vale la pena señalar que también podríamos seleccionar los mismos elementos HTML usando la :matches()pseudoclase. Por ejemplo, :matches(:link, :visited)seleccionará los mismos elementos que :any-link.

Otra cosa a tener en cuenta es que la especificación solicita actualmente sugerencias de nombres alternativos para este selector en el momento de escribir este artículo. Si bien no está claro si el nombre cambiará, la :matches()pseudoclase se nombró anteriormente, lo :any()que podría ser una indicación.

Soporte del navegador

El :any-linkpseudo-elemento se considera una característica experimental y es parte de la especificación Selectors Level 4, que actualmente se encuentra en estado de borrador de trabajo.

Para obtener soporte completo, querrá usarlo con el prefijo:

:-webkit-any-link ( ) :-moz-any-link ( ) :any-link ( )

Y recuerde no separar por comas esos selectores para combinarlos, ya que los navegadores arrojan selectores con partes que no comprenden.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
15* 3 * No 79 6,1 *

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 4,4 * 6.0-6.1 *

Relacionado

  • :link
  • :matches()
  • :visited

Más información

  • Especificación de selectores de nivel 4 (borrador de trabajo)
  • Documentación de Mozilla