Possible to override classes with specific element?-CodePudding

CSS newbie here wondering if this is possible. If I have something like the code below, is it possible to override just the section that has the class itemtile AND data-id of ABC123? My goal is to hide that entire section from being displayed. I've reviewed some past comments about specifity but when it comes to wanting both values to exist I get a bit lost. I'm mucking with trying to override code for a site that is not mine using a personal plugin.

<div id="itemgrid" >
<div  data-id="ABC123">
    <div ></div>
</div>
<div  data-id="DEF123">
    <div ></div>
</div>
</div>

I did some code examination in the debugger and can make the page do what I want by removing the div element for the data-id's I want to hide just not sure how to do it in CSS. I'm not asking for help on creating the plugin just if and how I can address an element that specifically.

CodePudding user response：

You can accomplish this with JavaScript

let class = document.getElementsByClassName("itemtile"); 

for(let i = 0; i < class.length; i  ){ 
    if(class[i].dataset.id == 'ABC123'){
         class[i].style.display = "none";
         break;
    }
}

Alternatively, if you want to do this using CSS, you can do it like so:

.itemtile[data-id='ABC123'] {
    display: none;
}

That should do it!

CodePudding user response：

You can override easily by adding style="" after your div

for example

<div style="" id="itemgrid" >