Pada kesempatan kali ini saya akan menjelaskan cara menggunakan selektor attribute ~ di css. Perlu teman-teman ketahui sebelumnya, di setiap tag html memiliki banyak attribute, salah satunya attribute id, class, data-id, title, src, href, alt, target, dan masih banyak lg lainnya. Dari setiap attribute html tersebut bisa diterapkan menjadi selektor css sehingga selektor css tersebut lebih spesifik lagi. Dari attribute tersebut nantinya bisa diterapkan diberbagai tag element html dan bisa dibuat lebih spesifik lagi untuk berbagai keperluan.

Seperti contoh untuk penulisan attribute selektor css seperti berikut :

Jika dilihat dari title attribute tersebut dapat didefinisikan di css dengan selektor attribute seperti berikut :

Sehingga maksud dari kode css tersebut adalah mencari element html p yang memiliki attibute title beserta dengan nilai attribute nya yaitu satu

Bahkan bukan hanya itu saja, dari attibute html tersebut bisa dibuat lebih spesifik lagi dengan menggunakan operator ~ | * ^ $  dan dari masing-masing operator tersebut memiliki arti dan fungsi tersendiri dan berbeda-beda. Seperti pada contoh disini yang saya berikan dengan menggunakan operator ~ .

~ adalah operator attibute selektor css yang berfungsi untuk memilih elemen yang memiliki nilai atribut yang mengandung suatu kata tertentu.

Seperti pada contoh disini dimana saya ingin memilih semua elemen yang memiliki atribut dengan nama judul yang berisi nilai attibute yang dipisahkan oleh spasi, salah satu attibute tersebut adalah “hewan”. dan dengan struktur html seperti dibawah ini:

Kasus yang ada adalah berilah properti background:red; pada setiap attribute title yang mengandung kata hewan, akan tetapi nilai dari attribute tersebut hanya nilai-nilai dengan spasi yang dibolehkan. Untuk membuatnya kalian bisa ikuti tahapan yang saya berikan dibawah ini.

Berikut Tahapannya :

  1. Teman-teman buat satu buah file index.html, ketika kode seperti berikut :

  • Jika sudah save file index.html tersebut, dan lihat hasil outputnya

Maka dari setiap attribute title yang nilainya terkait dengan kata hewan akan diaktifkan dengan property background:red;. Tapi dengan satu syarat, operator ~ tersebut dikhususkan hanya untuk mencari nilai text yang memiliki pemisah spasi. seperti pada element list yang ketiga dimana title tersebut memiliki nilai “hewan buas “.

Sampai disini penjelasan saya mengenai cara menggunakan selektor attribute ~ di css, semoga bermanfaat.