Atribut Selectors

CSS Atribut Selectors
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Elemen Gaya HTML Dengan Atribut Tertentu

Hal ini dimungkinkan untuk gaya elemen HTML yang memiliki atribut tertentu, bukan hanya kelas dan id.
Catatan Catatan: IE7 dan IE8 dukungan atribut penyeleksi hanya jika DOCTYPE ditentukan!.

CSS [atribut] Pemilih

The [atribut] selector digunakan untuk memilih elemen dengan atribut tertentu.

Contoh berikut memilih semua elemen <a> dengan atribut target:
contoh
[target] {
     background-color: yellow;
}

Cobalah sendiri »

CSS [atribut = value] Pemilih

The [atribut = value] pemilih digunakan untuk memilih elemen dengan atribut tertentu dan nilai.

Contoh berikut memilih semua elemen <a> dengan target = "_ blank" atribut:
contoh
a [target = "_ blank"] {
     background-color: yellow;
}

Cobalah sendiri »

CSS [atribut ~ = value] Pemilih

The [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 dipisahkan dengan spasi dari kata-kata, salah satunya adalah "bunga":
contoh
[title = ~ "bunga"] {
     border: 5px padat kuning;
}

Cobalah sendiri »

Contoh di atas akan cocok dengan elemen title = "bunga", title = "bunga musim panas", dan title = "bunga baru", tapi tidak title = "my-bunga" atau title = "bunga".
CSS [atribut | = value] Pemilih

The [atribut | = value] pemilih digunakan untuk memilih elemen dengan atribut tertentu dimulai dengan nilai tertentu.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang dimulai dengan "top":

Catatan: Nilai harus seluruh kata, baik sendiri, seperti class = "top", atau diikuti dengan tanda hubung (-), seperti class = "top-teks"!
contoh
[class | = "top"] {
     background: yellow;
}

Cobalah sendiri »

CSS [atribut ^ = value] Pemilih

The [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!
contoh
[class ^ = "top"] {
     background: yellow;
}

Cobalah sendiri »

CSS [atribut $ = value] Pemilih

The [atribut $ = value] 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!
contoh
[class $ = "test"] {
     background: yellow;
}

Cobalah sendiri »

CSS [atribut * = nilai] Pemilih

The [atribut * = nilai] pemilih digunakan untuk memilih elemen yang nilainya atribut berisi nilai tertentu.

Contoh berikut memilih semua elemen dengan nilai atribut kelas yang berisi "te":

Catatan: Nilai tidak harus seluruh kata!
contoh
[class * = "te"] {
     background: yellow;
}

Cobalah sendiri »

styling Bentuk

Penyeleksi atribut dapat berguna untuk bentuk styling 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;
}

Cobalah sendiri »