CODEWITHSUNDEEP
htmlcssimage
Peter Anson
Peter Anson

Reputation: 25

CSS *:not(img) not working

I searched various sources and all are saying the same thing.

This code:

*:not(img) {
display: none;
}

Should hide everything except images. But it hides images too.

Whats wrong?

Upvotes: 0

Views: 1184

Answers (2)

Temani Afif
Temani Afif

Reputation: 273512

As spotted in comment, this will make the container of images disappear thus the images too. So here another idea to achieve what you want:

You create an overlay that will cover the whole page with a big z-index and then you make your image positon:relative with a bigger z-index:

/* The normal CSS of the page */

body {
  margin: 0
}

.box {
  width: 200px;
  margin: 0 auto;
}

.box-2 {
  display: inline-block;
  padding: 20px;
}

img {
  max-width: 100%;
}


/* The CSS to keep only the images*/

body:after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  background:#fff;
}

img {
  position: relative;
  z-index: 9999999;
}
<div class="box">
  <img src="https://lorempixel.com/400/400/"> some text
</div>

<div class="box-2">
  <img src="https://lorempixel.com/400/400/"> some text
</div>
<p>lorem ipsum lorem ipusme lorem ipsum lorem ipusme lorem ipsum lorem ipusme</p>

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

Upvotes: 0

hobbs
hobbs

Reputation: 240294

Every image is inside of some other element, e.g. a div or even just the body. When you set those elements to be display: none, their contents are hidden as well, and that's everything.

Upvotes: 3

Related Questions