Tutorial Belajar CSS: Pengertian Attribute Selector dalam CSS

Dalam tutorial belajar CSS kali ini kita akan membahas tentang selector CSS yang lebih khusus, yakni Attribute Selector.

Pengertian Attribute Selector

Attribute Selector atau Atribut Selector adalah selector CSS yang digunakan untuk 'mencari' elemen HTML dengan menggunakan nilai attribut dari tag HTML. Untuk menggunakan attribute selector, kita menulisnya di dalam tanda kurung siku, seperti contoh berikut ini: [href], img[width="200px"] atau [href$=".pdf"].

Sekilas kita telah melihat cara penggunaan attribute selector dalam tutorial belajar CSS: Mengenal Jenis-jenis Selector Dasar CSS. Dalam tutorial CSS lanjutan ini kita akan membahasnya dengan lebih dalam.

Cara Penggunaan Attribute Selector CSS

Atribut selector memiliki beberapa fitur yang dibedakan berdasarkan apakah atribut tersebut berisi nilai tertentu, diawali nilai tertentu, diakhiri nilai tertentu atau mengandung nilai tertentu.

Attribute Selector: [attr]

Aturan penulisan atribut selector pertama kita adalah: [attr] (attr merupakan singkatan dari attribute). Nilai attr disini dapat diganti dengan atribut HTML yang ingin di cari.

Sebagai contoh, untuk membuat warna text menjadi hijau pada seluruh tag HTML yang memiliki atribut href, maka kode CSSnya adalah sebagai berikut:

[href] {
   color:green;
}

Karena biasanya atribut href digunakan di dalam tag <a>, maka atribut selector ini umumnya ditulis menjadi:

a[href] {
   color:green;
}

Sebagai contoh lain, jika kita ingin mencari seluruh tag <img> yang memiliki atribut title, maka bisa menggunakan selector img[title] seperti berikut:

img[title] {
   border: 1px solid blue;
}

Attribute Selector: [attr=value]

Penulisan atribut selector [attr=value] berarti kita mengikut-sertakan nilai dari atribut tersebut ke dalam selector.

Sebagai contoh, jika anda membuat halaman HTML yang memiliki banyak gambar dengan berbagai ukuran, maka untuk menyeleksi tag <img> yang memiliki atribut width="200px", kita bisa membuatnya dengan cara:

img[width="200px"] {
   border: 2px solid red;
}

Dengan menambahkan nilai 200px, maka selector diatas tidak akan mengubah border tag <img> lain yang memiliki atribut width selain 200px.

Attribute Selector: [attr^=value]

Atribut selector dengan penulisan [attr^=value], berarti selector tersebut akan mencari seluruh tag HTML yang nilai atributnya diawali dengan nilai "value" (perhatikan penggunaan tanda topi (^) pada karakter terakhir "attr")

Contohnya, jika kita ingin mengubah warna seluruh tag <a> yang menggunakan alamat absolut, bisa menggunakan kode CSS berikut ini:

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

Selector diatas akan mengubah warna teks untuk link berikut:

<a href="https://www.duniailkom.com">Link ke https://www.duniailkom.com</a>

Namun tidak akan mengubah warna teks untuk link berikut:

<a href="halaman_pertama.html">Link ke halaman_pertama.html</a>

Perhatikan bahwa nilai atribut href untuk contoh kedua merupakan alamat relatif yang tidak diawali dengan "http://".

Attribute Selector: [attr$=value]

Atribut selector dengan penulisan [attr$=value], berarti selector tersebut akan mencari seluruh tag HTML yang nilai atributnya diakhiri dengan nilai "value" (perhatikan penggunaan tanda dollar ($) pada karakter terakhir "attr").

Sebagai contoh, misalkan kita ingin mengubah warna link yang menuju file pdf. Untuk keperluan ini, kita bisa memanfaatkan akhiran ".pdf" pada atribut href. Berikut adalah kode CSS yang akan bisa digunakan:

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

Selector a[href$=".pdf"] akan mencari seluruh tag <a> yang memiliki nilai akhiran .pdf pada atribut href-nya seperti contoh berikut:

<a href="halaman/belajar_css.pdf">Link ke halaman/belajar_css.pdf</a>

Attribute Selector: [attr~=value]

Atribut selector dengan penulisan [attr~=value], akan mencari seluruh tag HTML yang nilai atributnya mengandung nilai "value" dan dipisahkan tanda spasi (perhatikan penggunaan tanda tilde (~) pada karakter terakhir attr).

Sebagai contoh, selector: img[title~=bunga] akan cocok dengan tag <img> yang memiliki atribut title = "bunga mawar", "karangan bunga", maupun "mari menanam bunga di taman". Dengan kata lain, img[title~=bunga] akan cocok dengan seluruh tag <img> dimana nilai atribut titlenya mengandung kata bunga yang dipisahkan dengan spasi.

Kata kunci "dipisahkan dengan spasi" berarti selector img[title~=bunga] tidak akan cocok dengan title="menanam-bunga" atau "taman telah berbunga", dimana keduanya bukan dipisahkan dengan spasi.

Attribute Selector: [attr|=value]

Atribut selector dengan penulisan [attr|=value], akan mencari seluruh tag HTML yang nilai atributnya mengandung nilai "value" dan dipisahkan tanda penghubung (-) (perhatikan penggunaan tanda pipa (|) pada karakter terakhir attr).

Contohnya, 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 "–".

Attribute Selector: [attr*=value]

Atribut selector dengan penulisan [attr*=value], akan mencari seluruh tag HTML yang nilai atributnya mengandung kata "value" (perhatikan penggunaan tanda bintang (*) pada karakter terakhir attr).

Jika pada selector [attr~=value] dan [attr|=value] hanya akan cocok jika nilai atribut dipisahkan "tanda spasi" atau "tanda penghubung", maka [attr*=value] akan cocok jika atribut mengandung nilai "value" terlepas dari ada atau tidaknya karakter pemisah.

Misalnya img[title*=belajar], akan cocok dengan tag <img> yang memiliki atribut title dengan nilai: sedang belajar, lagi-belajar, maupun sudahbosanbelajar.

Tutorial Cara Penggunaan Atribut Selector

Sebagai tutorial penggunaan atribut selector, berikut adalah kode HTML+CSS untuk merangkum semua atribut selector yang telah kita pelajari dalam tutorial kali ini:

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Attribut Selector CSS</title>
<style type="text/css">
   a[href] {
     text-decoration:none;             
     font-size:24px;
     color:blue;
   }
               
   a[href^="http://"] {
     font-weight: bold;
   }
               
   a[href$=".pdf"] {
     color:brown;
   }
               
   a[title~="link"] {
     color:green;
   }          
               
   a[title|="situs"] {
     color:red;
   }          
               
   a[href*="halaman"] {
     font-style: italic;
   }
</style>
</head>
<body>
   <h2>Belajar Attribut Selector CSS</h2>
   <br />
  
   <a href="halaman_saja.html">
     1. Link ke halaman_saja.html
   </a>
   <br />
  
   <a href="https://www.duniailkom.com">
     2. Link ke https://www.duniailkom.com
   </a>
   <br />
  
   <a href="halaman_unik.html">
     3. Link ke halaman_unik.html
   </a>
   <br />
  
   <a href="http://www.google.com" >
     4. Link ke http://www.google.com
   </a>
   <br />
  
   <a href="halaman_lain.html">
     5. Link ke halaman_lain.html
   </a>
   <br />
  
   <a href="halaman_buku/belajar_css.pdf">
     6. Link ke halaman_buku/belajar_css.pdf
   </a>
   <br />
  
   <a title="link ke kaskus, gan!" href="http://www.kaskus.com">
     7. Link ke http://www.kaskus.com
   </a>
  
   <br />
  
   <a title="situs-berita" href="http://www.kompas.com">
     8. Link ke http://www.kompas.com
   </a>
  
</body>
</html>

Dalam contoh kode HTML+CSS diatas, saya membuat 8 tag <a> dengan berbagai variasi atribut, selanjutnya saya membuat 6 atribut selector yang menggunakan href sebagai 'penanda' . Perhatikan bahwa masing-masing tag <a> akan memiliki perbedaan 'style' sesuai dengan kode CSS yang digunakan.

Pada selector pertama, saya menggunakan atribut a[href] untuk membuat semua link berwarna biru, tanpa garis bawah, dan berukuran 24px. Anda akan melihat bahwa semua tag <a> akan 'ditangkap' dengan selector ini, karena semuanya memiliki atribut href.

Selector kedua: adalah a[href^="http://"] yang akan mencari semua tag <a> yang atribut href-nya diawali dengan "http:/". Dalam contoh diatas, terdapat 4 tag <a> yang memenuhi kriteria. Ke-4 tag<a> tersebut saya bedakan dengan membuat huruf tebal (font-weight: bold;).

Selector ketiga: a[href$=".pdf"], akan mencari semua tag <a> yang atribut href-nya berakhiran ".pdf", kemudian mengubah warna textnya menjadi coklat (color:brown).

Selector keempat: a[title~="link"], akan mencari semua tag <a> yang atribut title-nya memiliki kata "link" yang dipisahkan dengan karakter spasi, kemudian mengubah warna textnya menjadi hijau (color:green).

Selector kelima: a[title|="situs"], akan mencari semua tag <a> yang atribut title-nya memiliki kata "situs" yang dipisahkan dengan karakter penghubung "-", kemudian mengubah warna textnya menjadi merah (color:red).

Selector keenam: a[href*="halaman"], akan mencari semua tag <a> yang atribut href-nya memiliki kata "halaman", kemudian memiringkan textnya dengan property: font-style: italic. Terdapat 4 tag<a> yang memiliki syarat ini.

Atribut selector yang kita pelajari dalam tutorial kali ini mungkin tidak terlaku sering digunakan, bahkan anda bisa membuat desain web modern tanpa menggunakan atribut selector sama sekali. Namun pengetahuan tentang fitur atribut selector sedikit banyak akan menjadi 'senjata rahasia' untuk mendapatkan efek khusus yang tidak bisa dibuat dengan selector standar CSS.

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.