Why is my display of none for my div in css being applied to all of its descendants even though I am-CodePudding

I am working on a page of mine. The aim is that when I click on the image of apples, everything except for the rest of my images gets set to a display of none.

Here is my code:

// hideAll() hides everything except the images in the fruits class.
function hideAll() {
  let fruit = document.querySelectorAll("div.main div.fruits");
  let mainContainer = document.querySelectorAll("div.main");
  mainContainer[0].style.display = 'none';
  for (i = 0; i < fruit.length; i  ) {
    fruit[i].style.display = 'block';
    //fruit[i].style.setProperty('display', 'block', '!important'); //This did not work
  }
}

.fruits {
  display: none;
}

img {
  width: 100px;
  height: 100px;
}

.Categories {
  padding: 5px 5px 5px 5px;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div >
    <h1>Main Page</h1>
    <div >
      <h2>Fruit Categories</h2>
      <div >
        <p>This page contains some fruit information.</p>
        <div >
          <p>We have apples, bananas, oranges, etc.</p>
        </div>
      </div>
      <img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg" onclick="hideAll();">
      <div >
        <div >
          <img src="https://foodprint.org/wp-content/uploads/2018/10/IMG_3392-e1539129880189.jpg">
        </div>
        <div >
          <img src="https://foodprint.org/wp-content/uploads/2018/10/imageedit_127_5581342771.jpg">
        </div>
        <div >
          <img src="https://i0.wp.com/moodymoons.com/wp-content/uploads/2016/02/img_8986.jpg?fit=4560,3000&ssl=1">
        </div>
        <div >
          <img src="https://www.naturalhealth365.com/wp-content/uploads/2016/04/blueberries.jpg">
        </div>
        <div >
          <img src="https://th.bing.com/th/id/OIP.gBifOTB-F-wBTx3bzYPiGgHaE-?pid=ImgDet&rs=1">
        </div>
        <div >
          <img src="https://th.bing.com/th/id/OIP.3yrzbKoKIgyR7eBhHma26AHaGm?pid=ImgDet&rs=1">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Basically, all of the images contained within the div class of fruits (6 images in total) needs to get set to a display of "block". Everything else gets set to a display of none (when the apple image is clicked).

Since there are many divs (and nested divs) within the main class, I thought that I could set the entire main class to a display of none. Then, I could set all of the elements within the fruits class to a display of block. I even tried using the !important keyword within the fruits class to override the effect of setting everything within the main div to none but that did not seem to do the trick.

Is there any way of targeting css for every descendant of a div except for the one specified?

CodePudding user response：

All of the children elements are not visible because their parent is invisible; not because they are inheriting anything, but because the element they are contained in is invisible.

The !important value only applies when you want to disrupt the CSS hierarchy; it has nothing to do with the HTML hierarchy.

In your case, you want to set the display attribute in your loop for each child individually; forget about the parent.

CodePudding user response：

You can do something like this snippet.

Note that I replaced your image src with placeholders since yours weren't showing up for me (and/or might stop showing up at some point).

It's coded such that all images show at the outset, and each time you click one, it'll hide itself and show all others. It's not clear what you're trying to achieve, but this behavior should at least illustrate how you can set it up for your needs.

//capture all fruits into an array variable
let allFruits = [...document.querySelectorAll("#elcon > div.fruits")];

allFruits.forEach((fruit) => {
  //add a click listener on each fruit element
  fruit.addEventListener("click", () => {
    //show all fruits
    allFruits.forEach(e => e.style.display = 'block');
    //hide the fruit that got clicked
    fruit.style.display = 'none';
  })
});

img {
  width: 100px;
  height: 100px;
}

.Categories {
  padding: 5px 5px 5px 5px;
  background-color: red;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div >
    <h1>Main Page</h1>
    <div >
      <h2>Fruit Categories</h2>
      <div >
        <p>This page contains some fruit information.</p>
        <div >
          <p>We have apples, bananas, oranges, etc.</p>
        </div>
      </div>
      <div  id="elcon">
        <div >
          <img src="https://via.placeholder.com/150/000000">
        </div>
        <div >
          <img src="https://via.placeholder.com/150/FF8000">
        </div>
        <div >
          <img src="https://via.placeholder.com/150/8F0000">
        </div>
        <div >
          <img src="https://via.placeholder.com/150/008000">
        </div>
        <div >
          <img src="https://via.placeholder.com/150/00FF00">
        </div>
        <div >
          <img src="https://via.placeholder.com/150/0000FF">
        </div>
      </div>
    </div>
  </div>
</body>

</html>