Apa arti tanda titik dua (: :) di CSS?

115

Apa arti tanda titik dua ( ::) di CSS?

Sebagai contoh:

input[type=text]::-ms-clear { display: none; }
Dilhan Jayathilake
sumber

Jawaban:

110

Itu berarti pemilih elemen semu . Artinya elemen di sebelah kanan tidak ada di DOM normal, tetapi bisa dipilih.

Sebuah pseudo-element dibuat dari dua titik dua (: :) diikuti dengan nama dari pseudo-element.

Sumber

Itu awalnya hanya usus tunggal, tetapi diubah untuk membedakannya dari kelas semu (seperti :hover, :first-child, :notdll). Yang terbaik adalah menggunakan elemen :for beforedan afterpseudo karena titik dua memiliki dukungan browser yang lebih baik, yaitu di versi IE sebelumnya.

alex
sumber
27

The ::Operator menunjukkan Anda memilih elemen semu , salah satu yang tidak benar-benar ada sebagai elemen tetapi masih dapat ditargetkan untuk styling.

Contoh ini mencakup beberapa implementasi khusus vendor seperti -ms-clearcontoh yang Anda berikan, sebagian besar browser juga memiliki elemen pseudo untuk mengatur gaya bilah gulir dan elemen UI bawaan lainnya, tetapi ada juga banyak elemen pseudo yang telah ditentukan sebelumnya yang dapat dirujuk untuk alasan praktis, seperti first-linedan first-letter.

The :beforedan :aftersemu elemen bahkan memungkinkan Anda untuk memasukkan konten yang sebenarnya ke dalam halaman dengan menggunakan CSS dengan contentaturan.

Niels Keurentjes
sumber
12

CSS3 mengubah cara pseudo-elemen dipilih, karena W3C ingin membedakan pseudo-class seperti a:visiteddari pseudo-elemen sejenisnya p::first-line. Lihat Pemilih CSS Tingkat Lanjut .

Eric Jablow
sumber