Memilih selektor dengan atribut pada CSS

Pada CSS Anda bisa memilih selektor dengan nama atribut tertentu atau berdasarkan pada keberadaan nil

Selektor atribut

Pada CSS Anda bisa memilih selektor dengan nama atribut tertentu atau berdasarkan pada keberadaan nilai atribut tertentu. Anda bisa menggunakan selektor atribut langsung dengan meletakan nama atributnya, atau Anda pun bisa meletakan nilai atribut langsung secara opsional dalam sepasang tanda kurung.

Selektor nama [atribut]

Selektor [attribute] ini paling sederhana, Anda tinggal memilih nama atribut mana yang akan dipilih.

Misalnya, kita bisa memilih semua elemen yang memiliki atribut title dengan menggunakan aturan style berikut:

[title] {
    color: green;
}

Selektor isi [atribut=”nilai”]

Selektor [atribut="nilai"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya.

Misalnya, kita bisa memilih semua elemen <a> yang memiliki nama atribut target dan yang mempunyai nilai atribut _ blank.

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

Selektor tilde [atribut~=”nilai”]

Selektor [atribut~="nilai"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung kata tertentu.

Misalnya, kita bisa memilih semua elemen <p> yang memiliki nama atribut class dan yang mempunyai nilai atribut yang mengandung kata bahaya.

p[class~=”bahaya”] {
    color: white;
    background-color: red;
}

Selektor pipa [atribut|=”nilai”]

Selektor [atribut|="nilai"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung kata tertentu serta yang dipisahkan dengan tanda hubung.

Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai atribut yang mengandung kata text lalu dipisahkan dengan penghubung seperti: text-pertama, kata tunggal seperti text tanpa penghubung sekali pun masih bisa diterapkan.

[class|=”text”] {
    background-color: yellow;
}

Selektor caret [atribut^=”nilai”]

Selektor [atribut^="nilai"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung nilai kata tertentu.

Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai atribut yang mengandung kata nomor seperti: nomor-pertama, nomorkedua dan sebagainya. Kata tunggal seperti nomor tanpa penghubung sekali pun masih bisa diterapkan.

[class^=”nomor”] {
    background-color: black;
    color: white;
}

Selektor dollar [atribut$=”nilai”]

Selektor [atribut$="nilai"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung nilai berakhiran kata tertentu.

Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai atribut yang berakhiran kata tes seperti: paragraf-tes, tulisantes dan sebagainya. Kata tunggal seperti tes tanpa penghubung sekali pun masih bisa diterapkan.

[class$=”tes”] {
    background-color: orange;
}

Selektor bintang [atribut*=”nilai”]

Selektor [atribut*="nilai"] digunakan untuk memilih nama atribut berdasarkan value atau nilai didalamnya yang mengandung nilai kata atau huruf yang sudah ditentukan.

Misalnya, kita bisa memilih semua elemen yang memiliki nama atribut class dan yang mempunyai nilai huruf pa seperti: paragraf-satu, paragrafdua dan sebagainya. Kata tunggal seperti pa tanpa penghubung sekali pun masih bisa diterapkan.

[class*=”pa”] {
    background-color: yellow;
    font-size: 20px;
}