: tautan-apa saja - Trik CSS

Anonim

The :any-linkpseudo-kelas dalam CSS menyediakan metode untuk memilih elemen yang jangkar sumber hyperlink.

Jika istilah jangkar sumber kehilangan Anda, itu adalah nama yang bagus untuk href atribut pada elemen HTML , dan . (Mengapa Anda perlu menargetkan atau di CSS berada di luar jangkauan saya, tapi hei.) Spesifikasi HTML memiliki lebih banyak informasi tentang itu.

Elemen yang menerima dan berisi hrefatribut adalah hyperlink dan akan dipilih dengan :any-link. Ini menjadi cara praktis untuk memilih semua elemen HTML berbasis tautan yang mungkin tampak tidak terkait dan tanpa menyentuh markup. Mungkin itu ada karena Anda mungkin berpikir :linkakan memilih semua tautan, tetapi meleset :visited, jadi ini membungkus semuanya.

Secara fungsional, ini seperti pemilih atribut (href).

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

Perlu dicatat bahwa kita juga dapat memilih elemen HTML yang sama menggunakan :matches()pseudo-class. Misalnya, :matches(:link, :visited)akan memilih elemen yang sama seperti :any-link.

Hal lain yang perlu diperhatikan adalah bahwa spesifikasi saat ini meminta saran nama alternatif untuk pemilih ini pada saat penulisan ini. Meskipun tidak jelas apakah namanya akan berubah, :matches()pseudo-class sebelumnya dinamai :any()yang bisa menjadi indikasi.

Dukungan Browser

The :any-linkpseudo-elemen dianggap sebagai fitur eksperimental dan merupakan bagian dari Selectors Level 4 spesifikasi, yang saat ini dalam bekerja rancangan status.

Untuk dukungan penuh, Anda ingin menggunakannya dengan awalan:

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

Dan ingatlah untuk tidak memisahkan koma-selektor tersebut untuk menggabungkannya, karena browser melemparkan pemilih dengan bagian yang tidak mereka pahami.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
15 * 3 * Tidak 79 6.1 *

Ponsel / Tablet

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

Terkait

  • :link
  • :matches()
  • :visited

Informasi Lebih Lanjut

  • Spesifikasi Selektor Level 4 (Konsep Kerja)
  • Dokumentasi Mozilla