How to select the parent element if all the child elements have a specific attribute?-CodePudding

How to select the section parent element and apply css styling, if all the p child elements have a specific attribute(style="display: none")?

<section>
  <div>
    <p style="display: none">P1</p>
    <p style="display: none">P2</p>
  </div>
</section>

CodePudding user response：

in case you want it with javascript

    <section id="container">
      <div id="parent">
        <p style="display: none;">P1</p>
        <p style="display: none;">P2</p>
      </div>
    </section>

const parent = document.getElementById("parent");
const container = document.getElementById("container");

let hasNoneDisplay = 0;

parent.childNodes.forEach((node) => {
  node.style?.display === "none" && hasNoneDisplay  ;
});

if (hasNoneDisplay === parent.childNodes.length) {
  //do what you want...
}

CodePudding user response：

Use the :has selector. Please note that this is a very new CSS feature so it is not supported yet by all major browsers (such as Firefox).

section:has(p[style='display: none']) {
  background: red;
  width: 100px;
  height: 100px;
}

The best you could do to confirm that ALL children match the specific attribute value is to use the :not selector for any other possible values. If the other possible values are unlimited and you have to handle every case then I think you would have to resort to JavaScript.

Example;

section:has(p[style='display: none']):not(:has(p[style='display: inline'])) {
  background: red;
  width: 100px;
  height: 100px;
}

Demo