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.