Ads by Yasya El Hakim
Atribut Selector Untuk Menyamakan Atribut Substring pada CSS3

Pada modul baru CSS3, W3C mengumumkan set baru dari Atribut Selector yang dinamakan Atribut Substring (Substring Matching Attribute) khususnya untuk menyeleksi atau menargetkan elemen yang memiliki atribut diawal dan memiliki nilai di akhir. Pada artikel kali ini, kita akan membahas atribut selector untuk membuat CSS agar menjadi lebih dinamis tanpa menggunakan Class atau ID.



Selector "Diawali Dengan" pada CSS

Selector yang di beri nama "Diawali Dengan (Begin With)" ini dapat ditulis dengan menggunakan karakter arah atas (^) untuk menyamakan elemen dan nilai atribut yang diawali dengan nilai selector yang ditentukan.

Contoh, jika kita ingin memilih atau mentargetkan semua link yang diawali dengan "https", kita dapat menggunakan selector seperti berikut:

a[href^="https"] {
   color: #FF6347;
   border-bottom: 1px dotted;
}


Pada contoh kode diatas, selector hanya memilih link yang memiliki "https" diawal dari nilai atribut href.

Selector "Diakhiri Dengan" pada CSS

Selector yang di beri nama "Diakhiri Dengan (End With)" ini dapat ditulis dengan menggunakan karakter dolar ($) untuk menyamakan elemen dengan nilai atribut yang diakhiri dengan nilai selector yang ditentukan.

Selector yang satu ini mungkin sangat berguna untuk menambahkan sebuah icon kedalam link berdasarkan ekstensi file pada nilai atribut href. Berikut adalah contoh untuk elemen HTML nya:

<a href="dokumen.pdf">Download Dokumen</a>


Pada CSS, kita dapat menggunakan selector berikut:

a[href$=".pdf"] {
   background: url('images/download.png') no-repeat 0 2px;
   padding-left: 25px;
}


Icon atau gambar download akan di render setelah link karena browser akan menyamakan string href yang diakhiri dengan string ".pdf".

Selector "Terdiri Dari" pada CSS

Selector yang di beri nama "Terdiri Dari (Contain)" ini dapat ditulis dengan menggunakan karakter bintang (*) untuk menyamakan elemen dengan nilai atribut yang terdiri dari nilai selector yang ditentukan.

Misalnya kita ingin menyeleksi semua gambar thumbnail yang terletak pada direktori "gambar". Berikut adalah contoh HTML nya:

<img src="images/gambar/elcreative.jpg" alt="EL Creative" />


Pada CSS, kita dapat memilih gambar yang terdiri dari atau berada di direktori "gambar" dengan menggunakan nilai dari atribut src. Berikut adalah contohnya:

img[src*="gambar"] {
   border: 5px solid #000;
}


Kompabilitas Browser (Browser Support)

Kabar baiknya, atribut selector tersebut didukung oleh semua browser modern termasuk Internet Explorer 7 keatas.

Seperti yang sudah saya tunjukkan diatas, menggunakan atribut selector untuk menyamakan atribut substring dapat mempermudah kita dalam memilih atau menyeleksi elemen berdasarkan nilai dari setiap atribut tanpa menggunakan Class atau ID. Semoga bermanfaat!.

2Komentar

  1. Mau nanya gan kalau yang di seleksi itu value dari tagnya misal Value judul
    Nah yang saya mau seleksi itu 'value judulnya' kira" gimana ya?

    BalasHapus
    Balasan
    1. Mungkin maksud agan begini ya? <tag value="judul">

      Kalau memang begitu, bisa langsung ke CSS selectornya. Contoh:

      tag[value="judul"]{
      ...
      }

      Hapus

Posting Komentar

Sebelumnya Selanjutnya