Tutorial Belajar CSS: Pengertian Attribute Selector dalam CSS

Posted on

Pada panduan belajar CSS kali ini kita akan membahas mengenai selector CSS yang lebih khusus, yakni Attribute Selector.


Pengertian Attribute Selector

Attribute Selector atau Atribut Selector yaitu selector CSS yang digunakan bagi ‘mencari’ unsur HTML dengan menggunakan nilai attribut dari tag HTML. Bagi menggunakan attribute selector, kita menulisnya di pada tanda kurung siku, seperti contoh berikut ini: [href], img[width=”200px”] atau [href$=”.pdf”].

Sekilas kita telah melihat cara pemakaian attribute selector pada panduan belajar CSS: Mengenal Jenis-jenis Selector Dasar CSS. Pada panduan CSS lanjutan ini kita akan membahasnya dengan lebih pada.


Cara Pemakaian Attribute Selector CSS

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

Attribute Selector: [attr]

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

Selaku contoh, bagi merancang warna text menjadi hijau di seluruh tag HTML yang mempunyai atribut href, karenanya kode CSSnya yaitu selaku berikut:

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

Selaku contoh lain, seandainya kita ingin mencari seluruh tag <img> yang mempunyai atribut title, karenanya dapat menggunakan selector img[title] seperti berikut:

Attribute Selector: [attr=value]

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

Selaku contoh, seandainya kamu merancang halaman HTML yang mempunyai banyak gambar dengan bermacam-macam ukuran, karenanya bagi menyeleksi tag <img> yang mempunyai atribut width=”200px”, kita dapat membuatnya dengan cara:

Dengan menambahkan nilai 200px, karenanya selector diatas tak akan mengubah border tag <img> lain yang mempunyai 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 pemakaian tanda topi (^) di karakter terakhir “attr”)

Contohnya, seandainya kita ingin mengubah warna seluruh tag <a> yang menggunakan domisili absolut, dapat menggunakan kode CSS berikut ini:

Selector diatas akan mengubah warna teks bagi link berikut:

Namun tak akan mengubah warna teks bagi link berikut:

Perhatikan bahwa nilai atribut href bagi contoh kedua adalah domisili relatif yang tak 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 pemakaian tanda dollar ($) di karakter terakhir “attr).

Selaku contoh, misalkan kita ingin mengubah warna link yang menuju file pdf. Bagi kebutuhan ini, kita dapat memanfaatkan akhiran “.pdf” di atribut href. Berikut yaitu kode CSS yang akan dapat digunakan:

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

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 pemakaian tanda tilde ( ) di karakter terakhir attr).

Selaku contoh, selector: img[title =bunga] akan cocok dengan tag <img> yang mempunyai 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] tak 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 pemakaian tanda pipa (|) di karakter terakhir attr).

Contohnya, selector: img[src|=hijau] akan cocok dengan tag <img> yang mempunyai atribut src (nama gambarnya) dengan nilai: hijau-daun.jpg, perpohonan-hijau.png, atau merah-kuning-hijau-biru.jpg. Perhatikan bahwa nilai
hijau” mesti terdapat pada 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 pemakaian tanda bintang Attribute Selector di karakter terakhir attr).

Kalau di selector [attr =value] dan [attr|=value] hanya akan cocok seandainya nilai atribut dipisahkan “tanda spasi” atau “tanda penghubung”, karenanya [attr*=value] akan cocok seandainya atribut mengandung nilai “value” terlepas dari ada atau tidaknya karakter pemisah.

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


Panduan Cara Pemakaian Atribut Selector

Selaku panduan pemakaian atribut selector, berikut yaitu kode HTML+CSS bagi merangkum segala atribut selector yang telah kita pelajari pada panduan kali ini:

 Pada contoh kode HTML+CSS diatas, saya merancang 8 tag <a> dengan bermacam-macam variasi atribut, berikutnya saya merancang 6 atribut selector yang menggunakan href selaku ‘penanda’ . Perhatikan bahwa masing-masing tag <a> akan mempunyai perbedaan ‘style’ sesuai dengan kode CSS yang digunakan.

Di selector pertama-tama, saya menggunakan atribut a[href] bagi merancang segala link berwarna biru, tanpa garis bawah, dan berukuran 24px. Sahabat akan melihat bahwa segala tag <a> akan ‘ditangkap’ dengan selector ini, karena semuanya mempunyai atribut href.

Selector kedua: yaitu a[href^=”http://”] yang akan mencari segala tag <a> yang atribut href-nya diawali dengan “http:/”. Pada contoh diatas, terdapat 4 tag <a> yang memenuhi kriteria. Ke-4 tag<a> tersebut saya bedakan dengan merancang huruf tebal (font-weight: bold;).

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

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

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

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

Atribut selector yang kita pelajari pada panduan kali ini mungkin tak terlaku sering digunakan, bahkan kamu dapat merancang desain web modern tanpa menggunakan atribut selector sama sekali. Namun pengetahuan mengenai fitur atribut selector sedikit banyak akan menjadi ‘senjata rahasia’ bagi memperoleh efek khusus yang tak dapat dibangun dengan selector standar CSS.


eBook CSS Uncover Duniailkom

Kalau kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/