I want to hide parent element <li>
according to its child attributes:
This question is not solving my issue: Is there a CSS parent selector?
My HTML:
<li class="tools-item"></li>
<li class="tools-item"></li>
<li class="tools-item">
<a href="/modules/chk/" data-identity="extensionButton_9_2" class="tool-block">
<span class="tool-icon">
<img src="/modules/chk/images/button.png" alt=""></span>
<span class="tool-name">Modules name</span>
</a>
<span class="tooltipData">Modules details</span>
</li>
<li class="tools-item"></li>
<li class="tools-item"></li>
Want to hide parent according to : data-identity="extensionButton_9_2"
My CSS:
Working for attribute:
[data-identity="extensionButton_9_2"]{
display: none !important;
}
Not working css for parent:
[data-identity="extensionButton_9_2"]:parent {
display: none !important;
}
li:has(> [data-identity="extensionButton_9_2"]) {
display: none !important;
}
Please help. Thanks