SELEKTOR ATRIBUT

Selektor atribut adalah fitur dalam CSS yang memungkinkan kamu untuk memilih elemen HTML berdasarkan nilai atributnya. Ini memberikan keleluasaan lebih dalam merancang dan memodifikasi elemen pada halaman web.

Penggunaan Dasar Selektor Atribut

Selektor atribut bekerja dengan cara memilih elemen berdasarkan pasangan nama-nilai atribut. Sintaks dasarnya adalah element[attribute]. Misalnya, kamu bisa memilih semua elemen <a> yang memiliki atribut href dengan sintaks a[href].

a[href] {
    color: blue;
}

Dengan kode di atas, semua elemen <a> yang memiliki atribut href akan berwarna biru.

Selektor Atribut dengan nilai spesifik

Kamu juga bisa menyertakan nilai spesifik dalam selektor atribut. Misalnya, a[href="https://www.example.com"] akan memilih link yang mengarah ke ”https://www.example.com“.

a[href="https://www.example.com"] {
    color: red;
}

Pada kode di atas, semua elemen <a> yang mengarah ke ”https://www.example.com” akan berwarna merah.

Selektor Atribut dengan awalan, akhiran, dan substring

Ada juga selektor atribut yang bisa memilih elemen berdasarkan awalan, akhiran, atau substring dari nilai atribut. Ini sangat berguna jika kamu ingin memilih elemen dengan pola atribut tertentu.

Awalan (prefix)

Untuk memilih elemen dengan awalan atribut tertentu, gunakan attribute^=value. Misalnya, a[href^="https://"] akan memilih semua link yang dimulai dengan “https://“.

a[href^="https://"] {
    color: green;
}

Akhiran (suffix)

Untuk memilih elemen dengan akhiran atribut tertentu, gunakan attribute$=value. Misalnya, img[src$=".jpg"] akan memilih semua gambar JPEG.

img[src$=".jpg"] {
    border-radius: 5px;
}

Substring

Untuk memilih elemen dengan substring atribut tertentu, gunakan attribute*=value. Misalnya, a[href*="w3schools.com"] akan memilih semua link yang mengandung “w3schools.com”.

a[href*="w3schools.com"] {
    background-color: yellow;
}

Kapan Menggunakan Selektor Atribut

Selektor atribut sangat berguna ketika kamu ingin memilih elemen berdasarkan informasi yang terkandung dalam atribut mereka, bukan tipe atau posisi mereka.