tutorial pengembangan web terbaru
 

CSS atribut Selectors

❮ Sebelumnya Bab selanjutnya ❯

Elemen gaya HTML Dengan Atribut Tertentu

Hal ini dimungkinkan untuk gaya elemen HTML yang memiliki atribut tertentu atau nilai atribut.

CSS [atribut] Selector

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

Contoh berikut memilih semua <a> elemen dengan atribut target:

Contoh

a[target] {
    background-color: yellow;
}
Cobalah sendiri "

CSS [atribut = "nilai"] Pemilih

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

Contoh berikut memilih semua <a> elemen dengan target="_blank" atribut:

Contoh

a[target="_blank"] {
    background-color: yellow;
}
Cobalah sendiri "

CSS [atribut ~ = "value"] Pemilih

The [attribute~="value"] pemilih digunakan untuk memilih elemen dengan nilai atribut yang mengandung kata tertentu.

Contoh berikut akan memilih semua elemen dengan atribut judul yang berisi daftar dipisahkan dengan spasi dari kata-kata, salah satunya adalah " flower ":

Contoh

[title~="flower"] {
    border: 5px solid yellow;
}
Cobalah sendiri "

Contoh di atas akan cocok elemen dengan title="flower", title="summer flower" , dan title="flower new" , tapi tidak title="my-flower" atau title="flowers" .

CSS [atribut | = "value"] Pemilih

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

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

Catatan: Nilai harus menjadi kata utuh, baik sendiri, seperti class="top" , atau diikuti dengan tanda hubung ( - ) , seperti class="top-text" !

Contoh

[class|="top"] {
    background: yellow;
}
Cobalah sendiri "

CSS [atribut ^ = "value"] Pemilih

The [attribute^="value"] pemilih digunakan untuk memilih elemen yang nilainya atribut dimulai dengan nilai tertentu.

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

Catatan: Nilai tidak harus menjadi kata seluruh!

Contoh

[class^="top"] {
    background: yellow;
}
Cobalah sendiri "

CSS [atribut $ = "value"] Pemilih

The [attribute$="value"] pemilih digunakan untuk memilih elemen yang nilainya atribut berakhir dengan nilai yang ditentukan.

Contoh berikut akan memilih semua elemen dengan nilai atribut kelas yang berakhir dengan "test" :

Catatan: Nilai tidak harus menjadi kata seluruh!

Contoh

[class$="test"] {
    background: yellow;
}
Cobalah sendiri "

CSS [atribut * = "value"] Pemilih

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

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

Catatan: Nilai tidak harus menjadi kata seluruh!

Contoh

[class*="te"] {
    background: yellow;
}
Cobalah sendiri "

Bentuk styling

Pemilih atribut dapat berguna untuk bentuk styling tanpa class 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 "

Tip: Kunjungi kami CSS Bentuk Tutorial untuk lebih banyak contoh tentang bagaimana gaya bentuk dengan CSS.

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»

Contoh lebih dari CSS Selectors

Gunakan kami CSS Selector Tester untuk menunjukkan pemilih yang berbeda.

Untuk referensi lengkap semua CSS, silahkan ke kami CSS Selectors Referensi .


❮ Sebelumnya Bab selanjutnya ❯