Pemilihan Attribut Detail CSS

CSS 2 memperkenalkan pemilih atribut.

Pemilih atribut dapat memilih elemen berdasarkan atribut dan nilai atributnya.

Pemilih Atribut Sederhana

Jika ingin memilih elemen yang memiliki atribut tertentu, tanpa memperhatikan nilai atributnya, dapat digunakan pemilih atribut sederhana.

Contoh 1

Jika ingin membuat semua elemen yang mengandung judul (title) menjadi merah, dapat ditulis:

*[title] {color:red;}

Coba sendiri

Contoh 2

Seperti yang diatas, hanya dapat menerapkan gaya untuk tombol (a elemen) yang memiliki atribut href:

a[href] {color:red;}

Coba sendiri

Contoh 3

Bisa dipilih berdasarkan beberapa atribut, cukup menghubungkan pemilih atribut bersamaan.

Contoh, untuk membuat teks tautan HTML yang memiliki atribut href dan title menjadi merah, dapat ditulis seperti ini:

a[href][title] {color:red;}

Coba sendiri

Contoh 4

Dapat digunakan dengan cara kreatif.

Contoh, dapat digunakan untuk semua gambar dengan atribut alt, untuk menonjolkan gambar yang efektif ini:

img[alt] {border: 5px solid red;}

Coba sendiri

Petunjuk:Kasus khusus di atas lebih cocok digunakan untuk diagnosa daripada desain, yaitu untuk mengecek apakah gambar sebenarnya efektif.

Contoh 5: Gunakan pemilih properti untuk dokumen XML

Pemilih properti sangat berguna di dokumen XML, karena bahasa XML mengusulkan untuk menentukan nama elemen dan atribut untuk tujuan elemen dan atribut.

Mengingat kami mengatur dokumen XML untuk menggambarkan planet sistem surya. Jika ingin memilih semua elemen planet dengan properti moons, untuk menampilkan merah, sehingga dapat lebih menonjolkan planet dengan moons, dapat ditulis seperti ini:

planet[moons] {color:red;}

Ini akan membuat teks elemen kedua dan ketiga di potongan tanda di bawah ini terlihat merah, tetapi teks elemen pertama bukan merah:

<planet>Venus</planet>
<planet moons="1">Bumi</planet>
<planet moons="2">Mars</planet>

Lihat efeknya

Pemilihan berdasarkan nilai properti spesifik

Selain memilih elemen yang memiliki properti tertentu, pengecekan lebih lanjut dapat disempurnakan untuk hanya memilih elemen dengan nilai properti tertentu.

Contoh 1

Contoh 1, misalnya, jika ingin membuat tautan yang mengarah ke dokumen yang ditentukan di server Web menjadi merah, dapat ditulis seperti ini:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Coba sendiri

Contoh 2

Seperti pemilihan pilihan sederhana, banyak pemilihan pilihan nilai yang dapat dihubungkan untuk memilih dokumen.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Ini akan merubah teks tautan pertama di tanda di bawah ini menjadi merah, tetapi tautan kedua atau ketiga tidak terpengaruh:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Coba sendiri

Contoh 3

Secara sama, bahasa XML juga dapat menggunakan metode ini untuk menata gaya.

Kembali ke contoh planet. Jika hanya ingin memilih elemen planet yang nilai atributnya moons adalah 1:

planet[moons="1"] {color: red;}

Kode di atas akan menjadikan elemen kedua dalam tanda yang berikut menjadi merah, tetapi elemen pertama dan ketiga tidak terpengaruh:

<planet>Venus</planet>
<planet moons="1">Bumi</planet>
<planet moons="2">Mars</planet>

Lihat efeknya

Atribut dan nilai atribut harus cocok total

Perhatikan, format ini memerlukan cocokan total dengan nilai atribut.

Jika nilai atribut mengandung daftar nilai yang dipisahkan spasi, kemungkinan akan ada masalah penyeleksi.

Berhati-hatilah potongan tanda ini:

<p class="important warning">Paragraf ini adalah peringatan yang sangat penting.</p>

Jika ditulis p[class="important"], aturan ini tidak dapat mencocokkan tanda penanda contoh.

Untuk memilih elemen berdasarkan nilai atribut khusus, harus ditulis seperti ini:

p[class="important warning"] {color: red;}

Coba sendiri

Pemilihan berdasarkan pemilih atribut nilai sebagian.

Jika perlu memilih berdasarkan kata dalam daftar nilai atribut, maka perlu menggunakan tanda panah (~).

Jika ingin memilih elemen yang mengandung class "important", dapat digunakan pemilih di bawah ini:

p[class~="important"] {color: red;}

Coba sendiri

Jika mengabaikan tanda panah, artinya perlu melakukan cocokan nilai keseluruhan.

Perbedaan pemilih atribut nilai sebagian dengan penamaan kelas titik.

Pemilih ini sama dengan yang telah disebutkan dalam konteks penamaan kelas titik.

Artinya, p.important dan p[class="important"] sama artinya saat diterapkan ke dokumen HTML.

Maka, mengapa masih ada pemilih atribut "~="? Karena ia dapat digunakan untuk setiap atribut, bukan hanya class.

Contoh, ada dokumen yang mengandung banyak gambar, namun hanya sebagian kecil yang adalah gambar. Untuk hal ini, dapat digunakan pemilih atribut bagian yang berdasarkan title dokumen, hanya memilih gambar-gambar ini:

img[title~="Gambar"] {border: 1px solid gray;}

Aturan ini akan memilih semua gambar yang teks judul mengandung "Figure". Gambar yang tidak memiliki atribut judul atau teks judulnya tidak mengandung "Figure" tidak akan cocok.

Coba sendiri

Pemilih Atribut Substring

Di sini akan disajikan modul pemilih yang lebih tinggi, yang dirilis setelah CSS2 selesai, yang mengandung banyak bagian pemilih nilai bagian yang lebih besar. Menurut aturan, disebutkan "Pemilih Atribut Substring".

Banyak peramban modern yang mendukung pemilih ini, termasuk IE7.

Tabel di bawah adalah ringkasan sederhana tentang pemilih ini:

Tipe Deskripsi
[abc^="def"] Pilih semua elemen nilai atribut abc yang dimulai dengan "def".
[abc$="def"] Pilih semua elemen nilai atribut abc yang berakhir dengan "def".
[abc*="def"] Pilih semua elemen nilai atribut abc yang mengandung substrings "def".

Dapat diingat, pilihan ini memiliki berbagai kegunaan.

Sebagai contoh, jika ingin menerapkan gaya ke semua tautan yang mengarah ke CodeW3C.com, tidak perlu menentukan class untuk semua tautan ini, dan menulis gaya untuk kelas, tetapi hanya menulis aturan berikut:

a[href*="codew3c.com"] {color: red;}

Coba sendiri

Petunjuk:Setiap atribut dapat digunakan dengan pemilih ini.

Tipe pemilih atribut khusus

Akhirnya, akan disajikan pemilih atribut khusus. Lihat contoh di bawah ini:

*[lang|="en"] {color: red;}

Aturan di atas akan memilih semua elemen yang nilai properti lang sama dengan en atau dimulai dengan en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Coba sendiri

Secara umum, [att|="val"] dapat digunakan untuk setiap atribut dan nilai.

Dengan asumsi ada berbagai gambar di dokumen HTML, setiap nama berkas gambar berupa figure-1.jpg dan figure-2.jpgDengan demikian, dapat digunakan pemilih berikut untuk mencocokkan semua gambar ini:

img[src|="figure"] {border: 1px solid gray;}

Coba sendiri

Tentu saja, penggunaan paling umum dari pemilih properti ini adalah untuk mencocokkan nilai bahasa.

Panduan Referensi Pemilihan CSS

Pemilihan Deskripsi
[attribute] digunakan untuk memilih elemen yang memiliki atribut yang ditentukan.
[attribute=value] digunakan untuk memilih elemen yang memiliki atribut dan nilai yang ditentukan.
[attribute~=value] digunakan untuk memilih elemen yang memiliki kata yang ditentukan di dalam nilai properti.
[attribute|=value] digunakan untuk memilih elemen yang memiliki nilai properti yang mulai dengan nilai yang ditentukan, nilai ini harus menjadi kata keseluruhan.
[attribute^=value] cocokkan setiap elemen yang memiliki nilai properti yang mulai dengan nilai yang ditentukan.
[attribute$=value] cocokkan setiap elemen yang memiliki nilai properti yang berakhir dengan nilai yang ditentukan.
[attribute*=value] cocokkan setiap elemen yang mengandung nilai properti yang ditentukan.