display none and :has-CodePudding

does :has respond positively or negatively to display: none. Meaning if you have an element, with display none on it, would :has still see that there is an element present? I assume it would since there is an element there. But I might need to combine it with:

:not([style*="display: none"])

just confirming the behavior

CodePudding user response：

The display property does not change behavior of selectors, as it doesn't change the DOM tree, so yes it would still work

like if you have

<div>
  <p>Hi</p>
</div>

div:has(p) {
  background: blue;
  padding: 5rem;
}
p {
  display: none;
}

CodePudding user response：

Since "display:none" we set as inline style at any code that element will be hidden.

<style>
.wrp:has(p[style='display:none']){
    display:block !important;
}
.wrp p:not([style='display:none']){
    color:red;
}
</style>

<div class='wrp'>
  <p style="display:none">1 This is a paragraph.</p>
  <p>2 This is a paragraph.</p>
</div>