Cara Menggunakan Attribute Selectors Pada CSS Bagian 2

Sebelum mempelajari tutorial Cara Menggunakan Attribute Selectors Pada CSS Bagian 2 ini, silahkan kalian belajar di tutorial Cara Menggunakan Attribute Selectors Pada CSS Bagian 1. Pada tutorial tersebut sudah dibahas tentang Attribute Selector [attribute] dan Attribute Selector [attribute=”value”] pada CSS.

Pada tutorial ini kalian akan belajar lebih lanjut tentang Attribute Selector pada CSS yaitu:

  1. Attribute Selector [attribute~=”value”]
  2. Attribute Selector [attribute|=”value”]
  3. Attribute Selector [attribute^=”value”]
  4. Attribute Selector [attribute$=”value”]
  5. Attribute Selector [attribute*=”value”]

Dari kelima jenis Attribute Selector di atas, perbedaannya adalah pada operator yang diletakkan sebelum sama dengan yaitu ~, |, ^, $ dan *.

Baik, sekarang kita akan bahas satu per satu dari kelima jenis Attribute Selector CSS di atas.

1. Attribute Selector [attribute~=”value”]

Attribute Selector [attribute~=”value”] digunakan untuk memilih elemen HTML yang nilai atribut-nya yang mengandung kata tertentu.

Contoh penggunaan Attribute Selector [attribute~=”value”]

Hasil penggunaan Attribute Selector [attribute~=”value”]

Hasil Attribute Selector ~ Value

Hasil Attribute Selector [attribute~=”value”]

2. Attribute Selector [attribute|=”value”]

Attribute Selector [attribute|=”value”] digunakan untuk memilih elemen HTML yang nilai atribut-nya dimulai dengan nilai tertentu. Nilai yang dimaksud harus berupa kata penuh, baik kata tunggal, seperti class=”box”, atau kata itu diikuti oleh tanda hubung (-), seperti class=”box-title”.

Contoh penggunaan Attribute Selector [attribute|=”value”]

Hasil Penggunaan Attribute Selector [attribute|=”value”]

Hasil Attribute Selector CSS

Hasil Attribute Selector CSS [attribute|=”value”]

Dari kedua contoh di atas mudah-mudahan kalian sudah dapat memahami cara penggunaan CSS Attribute Selector dengan berbagai variasi operator ~ dan |.

Untuk penjelasan berikutnya, saya tidak akan memberikan contoh detil seperti 2 contoh di atas, namun saya akan menjelaskan fungsi masing-masing  dan contoh kode CSS nya saja.

3. Attribute Selector [attribute^=”value”]

Attribute Selector [attribute^=”value”] digunakan untuk memilih elemen HTML yang memiliki nilai atribut yang dimulai dengan nilai tertentu, dan tidak mesti harus kata penuh. Contoh : box, box-body, boxfooter.

Penulisan CSSnya:

 

4. Attribute Selector [attribute$=”value”]

Attribute Selector [attribute$=”value”] digunakan untuk memilih elemen HTML yang memiliki nilai atribut dengan akhiran nilai tertentu. Contohnya atribut yang diakhiri dengan “coba“.

Penulisan CSSnya:

 

5. Attribute Selector [attribute*=”value”]

Attribute Selector [attribute*=”value”] digunakan untuk memilih elemen HTML yang nilai atributnya berisi nilai yang ditentukan. Contoh nilai atributnya diawali dengan “te“.

Penulisan CSSnya:

 

Ok, akhirnya silahkan kalian coba-coba contoh di atas, dan silahkan coba juga dengan kode CSS yang lain. Jika ada pertanyaan atau masalah saat uji coba, kalian dapat bertanya melalui kolom komentar di bawah tutorial ini.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *