Style Elemen HTML Dengan Atribut Spesifik
Hal ini dimungkinkan untuk gaya elemen HTML yang memiliki atribut tertentu atau nilai atribut.
CSS [atribut] Selector
[atribut] pemilih digunakan untuk memilih elemen dengan atribut tertentu.
Contoh berikut memilih semua elemen <a> dengan atribut target:
a[target] {
background-color: yellow;
}
CSS [atribut = nilai] Pemilih
atribut = nilai] pemilih digunakan untuk memilih elemen dengan atribut tertentu dan nilai.
Contoh berikut memilih semua elemen <a> dengan target = "_ blank" atribut:
a[target="_blank"] {
background-color: yellow;
}
CSS [atribut ~ = nilai] Pemilih
[atribut ~ = nilai] pemilih digunakan untuk memilih elemen dengan nilai atribut yang mengandung kata tertentu.
Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar ruang yang dipisahkan dari kata-kata, salah satunya adalah "a":
[title~="a"] {
border: 5px solid yellow;
}
Contoh di atas akan cocok dengan elemen title = "a", title = "a b", dan title = "a b c", tapi tidak title = "ab" atau title = "as".
CSS [atribut | = nilai] Pemilih
[atribut | = nilai] pemilih digunakan untuk memilih elemen dengan atribut yang ditentukan dimulai dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":
Catatan: Nilai harus menjadi seluruh kata, baik sendiri, seperti class = "top", atau diikuti dengan tanda hubung (-), seperti class = "top-teks"!
[class|="top"] {
background-color: yellow;
}
CSS [atribut ^ = nilai] Pemilih
[atribut ^ = nilai] pemilih digunakan untuk memilih elemen yang nilainya atribut dimulai dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":
Catatan: Nilai tidak harus seluruh kata!
[class^="top"] {
background-color: yellow;
}
CSS [atribut $ = nilai] Pemilih
[atribut $ = nilai] pemilih digunakan untuk memilih elemen yang nilainya atribut berakhir dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berakhir dengan "test":
Catatan: Nilai tidak harus seluruh kata!
[class$="test"] {
background-color: yellow;
}
CSS [atribut * = nilai] Pemilih
[atribut * = nilai] pemilih digunakan untuk memilih elemen yang nilainya atribut berisi nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi "to":
Catatan: Nilai tidak harus seluruh kata!
[class*="test"] {
background-color: yellow;
}
Styling Bentuk
Pemilih atribut dapat berguna untuk bentuk styling tanpa kelas atau ID:
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
0 komentar:
Posting Komentar