Cara Menggunakan Attribute Selectors Pada CSS Bagian 1
Dalam desain web dengan HTML dan CSS, sangat memungkinkan kita untuk menata/mengatur elemen HTML yang memiliki atribut atau nilai atribut tertentu menggunakan CSS. Untuk melakukan hal tersebut kita menggunakan Attribute Selector.
Pengertian Attribute Selector CSS
Attribute Selector atau Atribut Selector adalah selector CSS yang digunakan untuk ‘mencari’ elemen HTML dengan menggunakan nilai attribut dari tag HTML. Jika kalian akan menggunakan attribute selector, kalian dapat menulisnya di dalam tanda kurung siku. Contohnya : a[target].
Cara Penggunaan Attribute Selector
Attribute Selector [attribute]
Attribute Selector [attribute] adalah bentuk paling sederhana dari attribute selector yang menerapkan aturan style ke elemen jika atribut yang diberikan ada. Misalnya, kita bisa menata/mengatur semua elemen yang memiliki atribut “title” dengan menggunakan aturan style berikut:
1 2 3 |
[title] { color: blue; } |
Selector [title] dalam contoh kode CSS di atas cocok dengan semua elemen yang memiliki atribut “title“.
Kalian juga dapat membatasi pilihan ini untuk elemen HTML tertentu dengan menempatkan selector atribut setelah elemen selector, seperti ini:
1 2 3 |
abbr[title] { color: red; } |
Selektor abbr[title] ini hanya cocok dengan elemen <abbr> yang memiliki atribut “title“, sehingga cocok dengan singkatan, tetapi bukan untuk elemen anchor yang memiliki atribut “title“.
Bagi kalian yang bingung apa itu Tag abbr, silahkan simak penjelasan berikut ini:
Tag <abbr> adalah singkatan dari Abbreviation. Abbreviation berarti singkatan dan sesuai dengan namanya, ditujukan untuk text yang berbentuk singkatan seperti “NASA”, “HTML”, atau “HTTP”. Penggunaan tag ini biasanya juga menyertakan atribut title. Atribut title berfungsi untuk menampilkan kepanjangan dari singkatan yang ada pada tag <abbr>. Isi dari artibut title hanya ditampilkan ketika mouse berada diatas tag <abbr>. Tag <abbr> termasuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.
Contoh Penggunaan Attribute Selector [attribute]:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS (Attribute Selector) Bersama SolusiLain.Com</title> <style> [title] { color: blue; } abbr[title] { color: red; } </style> </head> <body> <p><abbr title="Badan Nasional Penanggulangan Bencana">BNPB</abbr> menyatakan status masa tanggap keadaan darurat akibat virus corona (Covid-19) diperpanjang lantaran skala penyebaran virus tersebut sudah meluas.<br> Sumber : <a href="https://cnnindonesia.com" title="CNN Indonesia">CNN Indonesia</a></p> </body> </html> |
Hasil Penggunaan Attribute Selector [attribute]:

Hasil Penggunaan Selector Attribute CSS
Attribute Selector [attribute=”value”]
Selector
[attribute="value"] digunakan untuk memilih elemen dengan atribut dan nilai tertentu. Kalian bisa menggunakan operator sama dengan (=) memasukkan atributnya.
Contoh berikut memilih semua elemen <a> dengan atribut target=”_ blank”:
1 2 3 |
a[target="_blank"] { background-color: yellow; } |
1 2 3 |
input[type="submit"] { border: 1px solid green; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS (Attribute Selector) Bersama SolusiLain.Com</title> <style> a[target="_blank"]{ background-color: yellow; } </style> </head> <body> <ol> <li><a href="http://solusilain.com" target="_blank">SolusiLain.Com</a></li> <li><a href="http://solusilain.com" target="_self">SolusiLain.Com</a></li> </ol> </body> </html> |
![Attribute Selector [attribute="value"]](https://solusilain.com/wp-content/uploads/2020/03/Hasil-Penggunaan-Selector-Attribute-Value-CSS.jpg)
Attribute Selector [attribute=”value”]