CSS Atribute Selectors ~ KODELOVER

Elemen HTML Gaya Dengan Atribut Spesifik

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

CSS [atribut] pemilih

Pemilihan [atribut] digunakan untuk memilih elemen dengan atribut tertentu.

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

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

CSS [attribute = "value"] Selector

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

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

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

CSS [attribute ~ = "value"] Selector

Pemilihan [atribut ~ = "value"] digunakan untuk memilih elemen dengan nilai atribut yang berisi kata tertentu.

Contoh berikut memilih semua elemen dengan atribut judul yang berisi daftar kata yang dipisahkan oleh spasi, yang salah satunya adalah "bunga":
Contoh

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

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

CSS [attribute | = "value"] Selector

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

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

Catatan: Nilai harus berupa keseluruhan kata, baik sendiri, seperti class = "top", atau diikuti tanda hubung (-), seperti class = "top-text"!
Contoh

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

CSS [attribute ^ = "value"] Selector

Pemilihan [atribut ^ = "value"] digunakan untuk memilih elemen yang nilai atributnya diawali dengan nilai yang ditentukan.

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

Catatan: Nilai tidak harus menjadi keseluruhan kata!
Contoh

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

CSS [attribute $ = "value"] Selector

Pemilihan [atribut $ = "value"] digunakan untuk memilih elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan.

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

Catatan: Nilai tidak harus menjadi keseluruhan kata!
Contoh

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

CSS [attribute * = "value"] Selector

Pemilihan [atribut * = "value"] digunakan untuk memilih elemen yang nilai atributnya berisi nilai yang ditentukan.

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

Catatan: Nilai tidak harus menjadi keseluruhan kata!
Contoh

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

Bentuk Styling

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;
}

KODELOVER

CSS Atribute Selectors

Related Post