Pemilih Atribut CSS
Gaya Elemen HTML Dengan Atribut Tertentu
Dimungkinkan untuk menata elemen HTML yang memiliki atribut atau nilai atribut tertentu.
CSS [atribut] Pemilih
Selector [attribute]digunakan untuk memilih elemen dengan atribut tertentu.
Contoh berikut memilih semua <a> elemen dengan atribut target:
Contoh
a[target] {
background-color: yellow;
}
CSS [atribut = "nilai"] Pemilih
Selector [attribute="value"]digunakan untuk memilih elemen dengan atribut dan nilai tertentu.
Contoh berikut memilih semua <a> elemen dengan atribut target="_blank":
Contoh
a[target="_blank"] {
background-color: yellow;
}
CSS [atribut~="nilai"] Pemilih
Selector digunakan untuk memilih elemen dengan nilai atribut yang [attribute~="value"]mengandung kata tertentu.
Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan spasi, salah satunya adalah "bunga":
Contoh
[title~="flower"] {
border: 5px solid yellow;
}
Contoh di atas akan mencocokkan elemen dengan title="flower", title="summer flower", dan title="flower new", tetapi bukan title="my-flower" atau title="flowers".
CSS [atribut|="nilai"] Pemilih
Selector digunakan untuk memilih elemen dengan atribut yang [attribute|="value"]ditentukan, yang nilainya bisa sama persis dengan nilai yang ditentukan, atau nilai yang ditentukan diikuti dengan tanda hubung (-).
Catatan: Nilai harus berupa kata utuh, baik tersendiri, seperti class="top", atau diikuti oleh tanda hubung( - ), seperti class="top-text".
Contoh
[class|="top"] {
background: yellow;
}
CSS [atribut^="nilai"] Pemilih
Selector digunakan untuk memilih elemen dengan atribut yang [attribute^="value"]ditentukan, yang nilainya dimulai dengan nilai yang ditentukan.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":
Catatan: Nilai tidak harus berupa keseluruhan kata!
Contoh
[class^="top"] {
background: yellow;
}
CSS [attribute$="nilai"] Pemilih
Selector digunakan untuk memilih elemen yang [attribute$="value"]nilai atributnya diakhiri dengan nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang diakhiri dengan "test":
Catatan: Nilai tidak harus berupa keseluruhan kata!
Contoh
[class$="test"] {
background: yellow;
}
CSS [atribut*="nilai"] Pemilih
Selector digunakan untuk memilih elemen yang [attribute*="value"]nilai atributnya mengandung nilai tertentu.
Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi "te":
Catatan: Nilai tidak harus berupa keseluruhan kata!
Contoh
[class*="te"] {
background: yellow;
}
Formulir Penataan
Pemilih atribut dapat berguna untuk menata bentuk tanpa kelas atau ID:
Contoh
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
Tip: Kunjungi Tutorial Formulir CSS kami untuk lebih banyak contoh tentang cara menata formulir dengan CSS.
Semua Pemilih Atribut CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |