css for parent selector for attribute

Question

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

@04FS no, i am want to according attributes. so its not duplicate — Shiv Singh, Sep 25 '19 at 07:19
It does not matter what you want to do it based _on_, selecting “upwards” in CSS is not possible in general. — 04FS, Sep 25 '19 at 07:21
@04FS not working according to that, if you know then post answer : li:has(> [data-identity="extensionButton_9_2"]) { display: none !important; } — Shiv Singh, Sep 25 '19 at 07:24
The answer to that question gives you some insight into the `:has()` selector, which is not yet implemented for stylesheets, but more detail can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:has — OliverRadini, Sep 25 '19 at 07:24
the other question will not solve your issue. It will tell you that you issue cannot be solved with CSS — Temani Afif, Sep 25 '19 at 08:33

score 1 · Accepted Answer · answered Nov 09 '22 at 10:57

You can use the :has() pseudo selector although browser support is limited. Until this is resolved, you could use a polyfill.

li:has(a[data-identity="extensionButton_9_2"]) {
  display: none;
}

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

score 0 · Answer 2 · answered Sep 25 '19 at 12:08

In this particular case, the solution does not require a parent selector, because all the content in the offending li can be hidden with CSS, and then the li will collapse (as long as you don't use the regular list-style-type).

li {
  list-style-type: none;
  position: relative;
}

li::before {
  position: absolute;
  left: -1em;
  content: '\2022';
}

[data-identity='extensionButton_9_2'],
[data-identity='extensionButton_9_2']~* {
  display: none;
}

<ul>
  <li class="tools-item">one</li>
  <li class="tools-item">two</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">four</li>
  <li class="tools-item">five</li>
</ul>

Of course if the situation were more complex (e.g. if there was content in the li before the a), then it would have become more difficult to find a css-only solution!

@TemaniAfif Sorry, I wouldn't know what to say under there that hasn't been said already. I'm aware of the whole "when is a duplicate not a duplicate" situation, but I do not have a satisfactory answer. — Mr Lister, Oct 04 '19 at 07:54

css for parent selector for attribute

2 Answers2