Blog Pintasku: Lebih Lanjut Atribute Selector Dalam CSS

Oke Pada Kesempatan kali ini Blog Pintasku akan menjelaskan tentang Atribute Selector, sebenarnya penjelasan tentang Atribute Selector ini sudah saya jelaskan sekilas pada artikel sebelumnya yang berjudul Mengenal Jenis Dasar Selector Dalam CSS.

Nahh sekarang kita akan membahasnya secara rinci mengenai atribute selector ini, sebelumnya saya pernah menjelaskan untuk menggunakan atribute selector ini, kita harus menulisnya di dalam kurung siku, misalnya pada atribut href yang sering digunakan pada tag <a> maka untuk menuliskan selectornya seperti ini [href].

Cara Menggunakan Atribute Selector CSS

Untuk menggunakan atribute selector ini kita harus mengetahui cara penulisannya, pada dasarnya penulisan atribute selector ini berbeda-beda, berikut ini adalah jenis- jenis penulisan atribute selector.

Attribute Selector: [attr]
Attribute Selector: [attr=value]
Attribute Selector: [attr^=value]
Attribute Selector: [attr$=value]
Attribute Selector: [attr~=value]
Attribute Selector: [attr|=value]
Attribute Selector: [attr*=value]

1. Atribute Selector: [attr]

Atribute Selector: [attr], [attr] itu adalah singkatan dari atribute, dimana nilai attr ini bisa di ganti atau lebih tepatnya dirubah menjadi atribut yang digunakan pada tag html yang ingin kita tambahkan CSS.

Supaya bisa lebih mengerti saya akan memberikan contohnya, misalnya kita ingin memberikan warna merah dan membuat tulisan bergaris bawah pada atribute href, maka kode cssnya adalah sebagai berikut.

[href] {
       color:green;
       text-decoration: underline;
       }

Karena biasanya atribute href ini digunakan pada tag <a> maka supaya bisa lebih spesifik lagi penulisan kode cssnya seperti dibawah ini.

a[href] {
       color:green;
       text-decoration: underline;
       }

2. Attribute Selector: [attr=value]

Penulisan Attribute Selector: [attr=value] ini maksudnya adalah penulisan dengan cara memasukan nilai dari atribute tersebut ke dalam selector.

Sebagai contoh, misalnya pada sebuah halaman html ada sebuah gambar dan setiap gambar tersebut menggunakan atribut width='400px', dimana kita ingin menambahkan style border pada setiap gambar tersebut. maka kode cssnya adalah berikut ini.

img[width="200px"] {
                    border: 3px solid black;
                    }

Pada contoh kode di atas dengan menambahkan value dari atribut, yaitu 400px maka semua tag <img> yang memiliki atribut width='400px' secara otomatis akan memiliki border 3px berwarna hitam.

3. Attribute Selector: [attr^=value]

Penulisan Attribute Selector: [attr^=value] adalah penulisan dimana selector akan mencari semua tag yang Nilai atributnya di awali dengan Value (nilai).

Supaya bisa lebih mengerti saya berikan contoh, misalnya kita ingin merubah warna dan memberikan efek garis bawah pada semua tag <a> yang menggunakan alamat absolut, maka kode css yang diberikan adalah berikut ini

a[href^="http://"] {
   color:blue;
}

Kode CSS di atas akan berlaku hanya untuk tag yang menggunakan URL absolut, seperti dibawah ini.

<a href="http://pintasku.blogspot.com">

Dan tidak akan berlaku pada URL Relatif seperti berikut ini.

<a href="halaman_pertama.html">

4. Attribute Selector: [attr$=value]

Penulisan Attribute Selector: [attr$=value] maksudnya adalah penulisan yang nantinya si selector akan mencari seluruh Tag HTML yang menggunakan atribut dan nilai (value) akhiran.

Misalnya kita ingin mengubah warna link yang menuju file yang ber ekstensi .apkdengan memanfaatkan akhiran berupa ekstensi .apk, kita bisa menggunakan kode css berikut ini.

a[href$=".apk"] {
   color:brown;
}

Dengan begitu, Selector a[href$=”.apk”] akan mencari seluruh tag <a> yang memiliki nilai akhiran .exe pada atribut href-nya seperti contoh berikut:

<a href="file/bbm.apk">

5. Attribute Selector: [attr|=value]

Penulisan Attribute Selector: [attr~=value], maksudnya adalah penulisan dimana nantinya selector akan mencari seluruh tag HTML yang nilai atributnya mengandung nilai “value” tetapi dipisahkan oleh tanda penghubung (-).

Misalkan, selector: img[src|=hijau] akan cocok dengan tag <img> yang memiliki atribut src (nama gambarnya) dengan nilai: hijau-daun.jpg, perpohonan-hijau.png, atau merah-kuning-hijau-biru.jpg. Perhatikan bahwa nilai “hijau” harus terdapat dalam atribut src dan dipisahkan dengan tanda penghubung “-”.

6. Attribute Selector: [attr~=value]

Contohnya, selector: img[title~=pintasku] akan cocok dengan tag <img> yang mempunyai atribut title = “pintasku logo”, “banner pintasku”. Dengan kata lain, img[title~=pintasku] akan cocok dengan seluruh tag <img> dimana nilai atribut titlenya mengandung kata pintasku yang dipisahkan dengan spasi.

7. Attribute Selector: [attr*=value]

Penulisan Atribute Selector: [attr*=value] berfungsi untuk mencari seluruh elemen/tag HTML yang nilai atributnya itu mengandung kata “value”.

Sebelumnya kita sudah mengetahui kalau Selector [attr~=value] dan [attr|=value] itu hanya akan berfungsi jika nilai atribut dipisahkan “tanda spasi” atau “tanda penghubung”, nahh sedangkan untuk [attr*=value] akan berfungsi jika atribut mengandung nilai “value”.

Supaya bisa lebih mengerti mengenai Selector [attr*=value],[attr~=value] dan [attr|=value] silahkan perhatikan contoh kode berikut ini.

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Attribut Selector CSS</title>
<style type="text/css">             
   a[title~="file"] {
     color:green;
   }          
                
   a[title|="situs"] {
     color:red;
   }          
                
   a[href*="halaman"] {
     font-style: italic;
   }
</style>
</head>
<body>
   <h2>Contoh Attribut Selector CSS</h2>   
   <a href="http://www.google.com" >Tanpa Atribute
   </a>
   <br />
   <a href="halaman_error.html">Penggunaan Atribute [attr*=value]
   </a>
   <br />
   <a title="file penting" href="http://www.kaskus.com">Contoh Penggunaan Selector [attr~=value]
   </a>
   <br />
   <a title="situs-Favorit" href="http://www.facebook.com">Contoh Penggunaan Selector [attr|=value]
   </a>
</body>
</html>

Keterangan :
Pada contoh di atas sudah terlihat kan yang menggunakan Attribute Selector: [attr|=value] maka akan berwarna merah, dan Attribute Selector: [attr~=value] akan berwarna hijau sedangkan Attribute Selector: [attr*=value] tulisannya akan menjadi miring, dan jika tidak menggunakan atribute selector akan terlihat seperti biasa atau masih default.

Lebih Lanjut Atribute Selector Dalam CSS