Ditulis oleh: Ditulis pada: 7/03/2018
CSS Selector Untuk Elemen Dengan Identitas Khusus - Sebenarnya ini hanya sebutan saya saja, secara pastinya saya tidak tahu sebutan apa untuk elemen yang seperti ini. Sebut saja setiap elemen HTML tentu saja memiliki tag dan lainnya memiliki beberapa tag dengan value. Nah kita bisa membuat CSS untuk target elemen tertentu sesuai dengan tag yang dimilikinya.Hal ini bisa ditemui ketika membuat CSS untuk elemen yang memiliki tag yang berubah-rubah, untuk itu perlu CSS yang tepat agar dapat sesuai dengan perubahan elemen tersebut.
Jika kita menggunakan CSS seperti ini, maka kita bisa membuat gaya sesuai dengan kondisi elemen tersebut. Ini bisa diimplementasikan untuk show hide div atau yang lainnya yang seperti itu.
CSS selector yang akan kita pelajari ini akan bermanfaat ketika kita memberikan gaya pada elemen yang di-inject oleh sebuah script, misal untuk show hide atau dengan kondisi lainnya.
Saya yakin, jika Anda sering utak-atik kode template untuk memodifikasi tampilan blog, maka suatu saat Anda akan menemukan sebuah kondisi yang saya maksudkan ini.
Misalkan pada sebuah
div yang disembunyikan dengan hidden seperti berikut:
<div id="element" hidden>
This is an element with ID
</div>
Kemudian kita menggunakan javascript untuk menampilkannya seperti berikut:
document.getElementById("element").style.display = "block";
Maka div di atas akan diinject style oleh javacript tadi sehingga di browser akan menjadi seperti ini.
<div id="element" hidden style="display: block;">
This is an element with ID
</div>
Nah kita akan memberikan style CSS untuk elemen div setelah di-inject oleh javascript.
1. Memberikan style pada div yang memiliki atribut
style dengan CSS berikut:
div#element[style] {
color: red;
}
Atau
2. Memberikan style pada div yang memiliki atribut
style="display: block;" dengan CSS berikut:
div#element[style="display: block;"] {
color: red;
}
Atau
3. Memberikan style pada div yang memiliki atribut
style dengan value terakhir block; dengan CSS berikut:
div#element[style$="block;"] {
color: red;
}
Atau
4. Memberikan style pada div yang memiliki atribut
style dengan value pertama display dengan CSS berikut:
div#element[style^="display"] {
color: red;
}
Atau
5. Memberikan style pada div yang memiliki atribut
style dengan value yang mengandung kata display: atau block; dengan CSS berikut:
div#element[style~="display:"] {
color: red;
}
Atau
div#element[style~="block;"] {
color: red;
}
Atau
6. Memberikan style pada div yang memiliki atribut
style dengan value yang memiliki kata display atau block dengan CSS berikut:
div#element[style*="display"] {
color: red;
}
Atau
div#element[style*="block"] {
color: red;
}
Tentu saja CSS-CSS di atas hanya sebagai contoh, Anda harus menyesuaikan dengan kondisi elemen yang Anda temui.
Semoga bermanfaat.