Bagaimana untuk menggunakan pemilih CSS untuk menyasarkan elemen div yang mengandungi atribut atau teg tertentu?

Question

Saya menggunakan sistem POS yang menjana laman web. Kebanyakan kod adalah proprietari jadi saya tidak boleh mengedit banyak.

Saya mempunyai senarai keluaran kategori dengan beberapa imej terapung sebagai kategori. Saya ingin menyembunyikan 3 pertama yang disenaraikan di halaman utama. Saya cuba meletakkan div yang mengandungi menggunakan div:nth-child(1), yang berfungsi, tetapi setiap halaman kanak-kanak juga menyembunyikannya.

Malangnya, semua halaman bukan laman utama hanya mempunyai kelas yang ditambahkan dalam badan dan div utama, jadi saya tidak boleh melakukannya mengikut ID kategori atau gaya atau mengikut halaman.

Apa yang saya ada ialah tag imej yang sama pada setiap halaman. Jadi saya cuba yang berikut:

img[src="theimage.png"] {
display: none; 
}

Ini juga berfungsi hebat, tetapi ia hanya menyembunyikan imej. Adakah terdapat sebarang cara untuk meletakkan div di sekeliling menggunakan kod ini atau variasi kod ini? Berikut adalah struktur asas untuk rujukan:

<div class="cCategoryDivContainer col-xs-12 col-sm-6 col-md-6 col-lg-4">
     <div class="cCategoryDiv">
         <div class="cItemTitleDiv">
             <p class="cCategoryTitle">Category Title</p>
         </div>
         <div class="cItemImageDiv">
             <span class="cItemImageHelper"></span>
             <a href="#"><img class="cItemImage" src="theimage.png"></a>
         </div>
     </div>
 </div>

Pada asasnya, saya ingin menyasarkan kelas cCategoryDivContainer dan tetapkan src imej di dalam div IF kepada theimage.png .

Adakah ini mungkin?

Answer 1

Anda sebenarnya boleh melakukannya dalam pelayar moden. Lihat sokongan: https://caniuse.com/?search=has

.cCategoryDiv:has(img[src="theimage.png"]) {
  display: none;
}

     

         

             
Category Title
         
         

             
             
         
     
     

         

             
Category Title