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:
- Attribute Selector [attribute~=”value”]
- Attribute Selector [attribute|=”value”]
- Attribute Selector [attribute^=”value”]
- Attribute Selector [attribute$=”value”]
- 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”]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS Attribute Selector bersama SolusiLain.Com</title> <style> [title~=ikan] { border: 4px solid blue; } </style> </head> <body> <h3>Contoh hasil Attribute Selector [attribute~="value"].</h3> <p>Semua gambar yang mengandung kata "ikan" pada atribut title akan diberikan border warna biru.</p> <img src="images/bawal.jpg" title="ikan bawal" width="200"> <img src="images/nila.jpg" title="ikan nilai" width="200"> <img src="images/gurame.jpg" title="gurame" width="200"> </body> </html> |
Hasil penggunaan Attribute Selector [attribute~=”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”]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS Attribute Selector bersama SolusiLain.Com</title> <style> [class|=box] { padding: 10px; border: 4px solid blue; color: green; } </style> </head> <body> <div class="box"> <h3 class="box-title">Contoh hasil Attribute Selector [attribute|="value"].</h3> <p class="box-body">Paragraf ini juga akan diformat karena mengandung kata "box" pada nilai attribut classnya.</p> </div> </body> </html> |
Hasil Penggunaan Attribute Selector [attribute|=”value”]

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:
1 2 3 4 5 |
[class^=box] { padding: 10px; border: 4px solid blue; color: green; } |
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:
1 2 3 |
[class$="coba"] { background: green; } |
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:
1 2 3 |
[class*="te"] { background: green; } |
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.