Css Selector Untuk Elemen Dengan Identitas Khusus

CSS selector yang akan kita pelajari ini akan bermanfaat ketika kita menunjukkan gaya pada elemen yang di-inject oleh sebuah script, misal untuk show hide atau dengan kondisi lainnya.

Saya yakin, kalau Anda sering utak-atik isyarat template untuk memodifikasi tampilan blog, maka suatu ketika Anda akan menemukan sebuah kondisi yang aku maksudkan ini.

Misalkan pada sebuah div yang disembunyikan dengan hidden menyerupai berikut:

 <div id="element" hidden>
 This is an element with ID
 </div>

Kemudian kita memakai javascript untuk menampilkannya menyerupai berikut:

 document.getElementById("element").style.display = "block";

Maka div di atas akan diinject style oleh javacript tadi sehingga di browser akan menjadi menyerupai ini.

 <div id="element" hidden style="display: block;">
 This is an element with ID
 </div>

Nah kita akan menunjukkan style CSS untuk elemen div sesudah di-inject oleh javascript.

1. Memberikan style pada div yang mempunyai atribut style dengan CSS berikut:

 div#element[style] {
   color: red;
 }

Atau

2. Memberikan style pada div yang mempunyai atribut style="display: block;" dengan CSS berikut:

 div#element[style="display: block;"] {
   color: red;
 }

Atau

3. Memberikan style pada div yang mempunyai atribut style dengan value terakhir block; dengan CSS berikut:

 div#element[style$="block;"] {
   color: red;
 }

Atau

4. Memberikan style pada div yang mempunyai atribut style dengan value pertama display dengan CSS berikut:

 div#element[style^="display"] {
   color: red;
 }

Atau

5. Memberikan style pada div yang mempunyai 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 mempunyai atribut style dengan value yang mempunyai 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.

Share this post