Memilih Atribut yang Tidak Kosong CSS

Hallo semuanya, pada kesempatan kali ini kita akan membahas sebuah trik css yang saya yakin sebagian besar dari kalian belum mengetahuinya, trik css apa yang akan kita pelajari? Baiklah trik ini adalah trik css dimana kita bisa memilih elemen html yang memiliki atribut tertentu yang harus ada isi yang sudah kita tentukan.

Kesimpulan Sederhana
kita akan menggunakan selector seperti ini.

[data-foo]:not([data-foo=""]) { }

Penjelasan lebih detail (kesimpulannya akhirnya sama, hanya akan dijelaskan lebih detail)

Anggap saja kita memiliki tag HTML seperti berikut

<div data-highlight="product">
</div>

dan disini kita ingin melakukan sesuatu dengan tag tersebut:

[data-highlight] {
  font-size: 125%;
}

[data-highlight="product"] img {
  order: 1;
}

atribut data diatas adalah bagian dari template, jadi kamu bisa berikan value tertentu atau tidak memberi value.

Tapi ini bisa tricky. Lihat di blok CSS pertama di atas, kita ingin menargetkan semua elemen dengan atribut data-highlight, tapi, kita sebenarnya hanya ingin melakukannya jika memiliki value. Jika nilainya kosong, kita tidak memberikan style khusus apapun.

Pada kasus sederhana, kita hanya akan menghapus atribut data dari template HTML ketika tidak ada nilai. Tetapi banyak bahasa templating dengan sengaja, tidak mengizinkan aktivitas menghapus bagian template secara manual.

Untuk mengatasi hal tersebut kita menggunakan kode seperti berikut

[data-highlight]:not([data-highlight=""]) {
  font-size: 125%;
}

[data-highlight="product"] img {
  order: 1;
}

Baiklah, demikian artikel kali ini yang membahas tentang cara memilih elemen yang memiliki atribut tidak kosong. Semoga bermanfaat.

14 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat