8 Jenis Attribute Selector CSS

CSS memiliki kemampuan untuk menargetkan elemen HTML berdasarkan salah satu atribut yang ada pada tag HTML tersebut. Jika kalian mungkin sudah tahu tentang class dan id. Lihat sekilas HTML berikut

<h1 id="judul" class="keren" rel="alternate">DavidGoWeb</h1>

Pada elemen HTML diatas memiliki tiga atribut, id, class, dan rel. untuk memilih elemen di css kalian dapat menggunakan selector id (#judul) atau selector class (.keren). Tetapi tahukah kalian bahwa kita dapat menggunakan selector dari atribut rel juga? metode ini biasa disebut attribute selector

h1[rel="alternate"] {
 /* isi properti css */
}

Tahukah kalian bahwa ada banyak jenis attribute selector yang bisa kalian gunakan untuk beberapa kasus styling tertentu. Berikut adalah 8 Jenis Attribute Selector Pada CSS :

1. Attribute Equals (sama persis)

Contoh Penggunaan

<h1 id="judul" class="keren" rel="alternate">DavidGoWeb</h1>

h1[rel="alternate"] {
 /* isi properti css */
}

2. Attribute Contain (memiliki sebagian value tertentu)

Contoh Penggunaan

<h1 class="xkerenx">DavidGoWeb</h1>

h1[class*="keren"] {
 /* isi properti css */
}

3. Attribute Begins (memiliki value dengan awalan tertentu)

Contoh Penggunaan

<div id="article_1"></div>
<div id="article_2"></div>
<div id="article_3"></div>

div[id^="article"] {
 /* properti css */
}

4. Attribute Ends (memiliki value dengan akhiran tertentu)

Contoh Penggunaan

<h1 class="xkerenx bagus">DavidGoWeb</h1>

h1[class$="bagus"] {
 /* properti css */
}

5. Attribute Within Space (value attribut yang terpisah dengan spasi)

Contoh Penggunaan

<h1 class="xkerenx bagus terbaik">DavidGoWeb</h1>

h1[class~="bagus"] {
 /* properti css */
}

6. Attribute Within Dash (value attribut yang terpisah dengan garis (-) dash)

Contoh Penggunaan

<h1 class="xkerenx-bagus-terbaik">DavidGoWeb</h1>

h1[class|="bagus"] {
 /* properti css */
}

7. Multiple Attribut (menggabungkan dua atau lebih attribute selector)

Contoh Penggunaan

<h1 class="xkerenx bagus terbaik" title="hello">DavidGoWeb</h1>

[class="bagus"][tittle="hello"] {
 /* properti css */
}

8. No Case Sensitive Attribute (menghilangkan case sensitif pada attribute selector)

Contoh Penggunaan

<h1 class="Bagus" title="hello">DavidGoWeb</h1>

[class="bagus" i] {
 /* properti css */
}