How to use CSS selectors to target div elements containing specific attributes or tags?

Question

I'm using a POS system that generates a website. Most of the code is proprietary so I can't edit much.

I have an output list of categories with some images floating as categories. I want to hide the first 3 listed on the homepage. I tried positioning the containing div using div:nth-child(1), which worked, but each child page also hides them.

Unfortunately, all non-home pages only have a class added in the body and main div, so I can't do it by category ID or style or by page.

What Ihave is the same image tag on every page. So I tried the following:

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

This also works great, but it only hides the image. Is there any way to position the surrounding div using this code or a variation of this code? Here's a basic structure for reference:

<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>

Essentially, I want to target the cCategoryDivContainer class and set the src of the image inside the div IF## to theimage.png .

is it possible?

Answer 1

Actually you can achieve this in modern browsers. View support: https://caniuse.com/?search=has

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

     

         

             
Category Title
         
         

             
             
         
     
     

         

             
Category Title