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:

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:

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]:

Hasil Penggunaan Attribute Selector [attribute]:

Hasil Penggunaan Selector Attribute CSS

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”:

Atau kalian dapat mencoba pada nilai attribut yang lain, seperti atribut type=”submit” pada elemen <input> di HTML. Sehingga kode CSS nya kalian dapat membuatnya seperti ini:
Contoh Penggunaan Attribute Selector [attribute=”value”]
Hasil penggunaan Attribute Selector [attribute=”value”]

Attribute Selector [attribute="value"]

Attribute Selector [attribute=”value”]

Demikian tutorial Cara Menggunakan Attribute Selectors Pada CSS Bagian 1, insyaAllah bagian 2 akan sebera menyusul.

Mungkin Anda juga menyukai

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *