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”].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;} |
a[href] { color:green;}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;} |
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="http://www.duniailkom.com">Link ke http://http://inf0kunet.blogspot.co.id</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="http://http://inf0kunet.blogspot.co.id"> 2. Link ke http://http://inf0kunet.blogspot.co.id </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>
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.
Pengertian Pseudo Selector dalam CSS
CSS masih memiliki 2 selector lagi untuk membantu kita untuk ‘menyeleksi’ bagian kode HTML yang ingin dibuat ‘style’nya. Kedua selector ini adalah Pseudo-class selector dan Pseudo-element selector, secara umum saya menyebut kedua selector ini sebagai pesudo selector.Walaupun terkesan ‘rumit’, pseudo selector ini tidak terlalu susah dipahami. Disebut pseudo selector (selector ‘semu’) karena tidak seperti selector lain, pseudo selector digunakan untuk mengakses kode HTML yang ‘tidak terlihat’ atau merupakan bagian dari sebuah tag yang tidak bisa diakses dengan selector biasa.
Saya akan membahas Pseudo-class terlebih dahulu.
Pengertian Pseudo-class Selector CSS
Pseudo Class Selector adalah selector CSS yang digunakan untuk mengakses bagian tertentu dalam HTML yang tidak ‘terlihat’ (tidak tertulis di dalam HTML) atau bagian dari HTML yang tidak bisa diakses dengan selector sederhana lain.Dalam referensi dari W3C, Pseudo-class selector dijelaskan sebagai berikut:
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. http://www.w3.org/TR/css3-selectors/#pseudo-classesPenggunaan pseudo class selector lebih banyak dirancang untuk mengakses ‘kondisi khusus’ dalam HTML.
Sebagai contoh, seperti yang kita ketahui bahwa tag <a> digunakan untuk membuat link di dalam HTML. Jika kita ingin membuat link berwarna merah, berikut adalah kode CSS menggunakan tag selector:
a { color:red; } |
Untuk mengakses sebuah link, kita akan mengarahkan mouse ke dalam tulisan link tersebut. Pada saat cursor mouse berada di atas link, kita juga bisa mengubah warna link untuk saat itu saja, yakni pada saat posisi cursor mouse berada di atas link (istilah programmingnya: mouseover). Untuk hal ini, CSS menyediakan pseudo-class selector “:hover”.
Untuk membuat tag <a> yang akan berubah menjadi hijau ketika mouse berada diatasnya (mouseover), kita menulisnya sebagai berikut:
a:hover { color:green; } |
Perhatikan bahwa penulisan pseudo-class selector diawali dengan satu tanda titik dua (“:”).
Walaupun dalam contoh diatas saya menyatukan penulisan :hover dengan tag <a>, kita tidak harus menggunakannya secara bersama-sama, seperti berikut ini
:hover { color:yellow; }Selain membuat style utuk efek “mouseover” seperti diatas, pseudo-class selector masih memiliki beberapa selector lain, seperti :visited , :focus , :active, :nth-child(N), :last-child, only-child dan :not(S).
Pengertian Pseudo-element Selector CSS
Jika pseudo-class selector lebih berfokus kepada kondisi khusus dari HTML, maka pseudo-element selector akan menyeleksi ‘potongan’ tag atau mengakses sebuah elemen yang sebelumnya tidak ada.Dalam referensi dari W3C, Pseudo-element selector dijelaskan sebagai berikut:
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source documen. http://www.w3.org/TR/css3-selectors/#pseudo-elementsDalam versi CSS1 dan CSS2, pseudo-element ditulis menggunakan 1 tanda titik dua seperti pseudo-class (:), namun dalam CSS3, pseudo-element ditulis menggunakan 2 tanda titik dua (::). Perubahan ini dibuat untuk menekankan perbedaan antara pseudo-class dengan pseudo-element.
Walaupun dalam spesifikasi CSS3 pseudo-element harus ditulis menggunakan 2 buah tanda titik 2 (::), namun web browser modern masih mendukung penulisan menggunakan 1 tanda titik dua (:). Sebagai contoh, p::first-line boleh juga ditulis menjadi p:first-line. Lebih jauh lagi, IE8 kebawah masih ‘tidak mengerti’ tanda “::”, sehingga menggunakan tanda “:”untuk pseudo-element masih umum digunakan.
Sebagai contoh, pseudo-element memiliki selector ::first-letter yang bisa digunakan untuk menyeleksi huruf pertama dari sebuah paragraf. Misalkan untuk membuat huruf pertama pada tag <p> berwarna merah, maka kode CSSnya adalah sebagai berikut:
p::first-letter { color:red; } |
Beberapa contoh pseudo-class selector lainnya adalah: ::first-line, ::before, dan ::after. Kita akan membahasnya secara mendalam pada tutorial lainnya.
Contoh Penggunaan Pseudo-class dan Pseudo-element CSS
Sebagai contoh tutorial penggunaan pseudo-class dan pseudo-element dalam CSS, berikut adalah kode HTML dan CSS dengan menggunakan :hover dan ::first-letter:<!DOCTYPE html><html><head><title>Belajar Pseudo-class dan Pseudo-element CSS</title><style type="text/css"> a:hover { color : green; } p::first-letter { font-size : 30px; color : red; float : left; }</style></head><body> <h2>Belajar Pseudo-class dan Pseudo-element CSS</h2> <h3>contoh pseudo-class: :hover</h3> <a href="http://http://inf0kunet.blogspot.co.id">Belajar CSS di http://inf0kunet.blogspot.co.id</a> <h3>contoh pseudo-element: ::first-letter</h3> <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p></body></html>
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon