Mengenal CSS3 Substring Matching Attribute Selectors

xzibit-wtf

Mungkin untuk anda anda yang biasa menggunakan Style CSS pasti tidak asing dengan yang namanya class dan id yang dimana class dimulai dengan tanda titik (.) di selector nya, dan ID dimulai dengan tanda pagar (#).

Nah bagaimana kalau kita ingin memilih konten yang dinamis tanpa ada ID dan Class ?

seperti misalnya saya punya beberapa input form

<input type="text" name="tulisan">
<input type="password" name="password">

bagaimana cara mengambil tipe input yang bernama tulisan ? Yup kita bisa tambahkan attribut id="" di input tersebut. Tapi hal itu bisa dilakukan tanpa memasukan ID di input tersebut, kita bisa memakai substring matching attribute selectors (SMAS) dengan memberi rule selector seperti berikut

input[name=tulisan] {
    /* Style Anda Di sini */
}

sehingga kita dapat memberi rule CSS untuk input dengan nama tulisan.

ada beberapa jenis selector yang kita bisa pakai seperti.

selector dengan kata di depan

Rumus/Sintaks : element[attr^=val]

Dengan menggunakan selector tersebut kita bisa memilih konten dengan menfilter teks mulai dari depan. Seperi kita mempunyai elemen.

<a href="http://kambing.ui.ac.id">Kambing</a>
<a href="ftp://kambing.ui.ac.id/eclipse/">FTP Kambing</a>
<a href="https://www.twitter.com/">Secure Web</a>

untuk dapat memilih url dengan depanan ftp:// kita dapat menggunakan kode

a[href^="ftp://"] {
    /* Style Anda Di sini */
}

Sehingga css akan memilih semua konten link dengan attribut href dan setiap didepan nya bernilai (value) ftp://

Selector dengan kata di belakang

Rumus/Sintaks : element[attr$=val]

Kebalikan dari di atas tadi, dimana kita dapat menfilter teks mulai dari belakang. Seperti kita mempunya konten berikut.

<a href="http://konten.com/file/lagu.mp3">Lagu ku</a>
<a href="http://konten.com/file/video-ae.mp4">Video ku</a>
<a href="http://konten.com/file/Dokumen-penting.otf">Dokumen penting !</a>

kita ingin memilih link dengan akhiran .mp4 kita dapan menggunakan nya dengan kode berikut.

a[href$=".mp4"] {
    /* Style Anda Di sini */
}

Sehingga css akan memilih konten link dengan attribute href ber-value akhiran .mp4 saja.

Selector dengan kata yang tercantum.

Rumus/Sintaks : element[attr*=val]

Dengan selector ini, kita dapat memilih konten dengan syarat ada kata yang tercantum dalam attribut elemen yang akan kita tentukan.

Misalnya saya mempunyai konten berikut.

<a href="http://twitter.com/engga_enak/">My Twitter</a>
<a href="http://twitter.com/engga_enak/following">My Following</a>
<a href="http://twitter.com/engga_enak/followers">My Followers</a>

<a href="http://twitter.com/herihehe/">My Friend Twitter</a>
<a href="http://twitter.com/herihehe/following">My Friend Following</a>
<a href="http://twitter.com/herihehe/followers">My Friend Followers</a>

lalu kita menggunakan kode CSS seperti berikut.

a[href*="engga_enak"] {
    /* Style Anda Di sini */
}

Yup dengan kode diatas kita hanya memilih link dengan ada kata engga_enak saja, yang berarti konten yang terpilih adalah. My Twitter, My Following dan My Followers.

Kesimpulan...

dengan menggunakan selector tersebut, kita dapat memilih konten secara dinamis tanpa harus tergantung dengan id dan class sehingga penggunaan akan menjadi efisien dan tanpa harus menprosess nya dengan javascript ataupun server di server side.

  • http://dzofar.com/ Muhammad Ali Mudzofar

    Beuuuh itu kok ada gambarnya artis hip hop :))

  • http://yui-flowerflower.blogspot.com/ Yuki Rito

    itu bisa di pakai diblogger ga ?