Belajar CSS

Lebih Lanjut Atribute Selector Dalam CSS

Atribute Selector Dalam CSS
Written by pintasku

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

Atribute 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.
  1. Attribute Selector: [attr]
  2. Attribute Selector: [attr=value]
  3. Attribute Selector: [attr^=value]
  4. Attribute Selector: [attr$=value]
  5. Attribute Selector: [attr~=value]
  6. Attribute Selector: [attr|=value]
  7. 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.

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

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.

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

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

Dan tidak akan berlaku pada URL Relatif seperti berikut ini.

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.

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

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]

Penulisan Attribute Selector: [attr~=value], maksudnya adalah penulisan dimana nantinya selector akan mencari seluruh tag HTML yang nilai atributnya mengandung nilai “value” tetapi dipisahkan menggunakan spasi.
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.

 

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.

Tentang Penulis

pintasku

Pintasku was established since 2015. Starting from a personal blog and now turned into a group of web developers. Pintasku provides web development, hosting, and domain register services