CSS :not() selector - Hide everything from body except one div

user_7279350 0
Viewed 867

Is it possible to hide all body inner elements with CSS
except intro-class and his child-elements?

body *:not(.intro > *) {
  opacity: 0;
}
<body>

  <h1>Welcome to My Homepage</h1>

  <div class="intro">
    <p id="firstname">My name is Donald.</p>
    <p id="hometown">I live in Duckburg.</p>
  </div>

  <p>My best friend is Mickey.</p>

</body>

css html
3 Answers

You can hide all direct childs elements of body except .intro. Opacity will be apply on an element and all his childs.

body>*:not(.intro) {
  opacity: 0;
}
<body>
  <h1>Welcome to My Homepage</h1>
  <div class="intro">
    <p id="firstname">My name is Donald.</p>
    <p id="hometown">I live in Duckburg.</p>
  </div>
  <div class="outro">
    <p id="firstname">My name is Mickey.</p>
    <p id="hometown">I live in Mickeyburg.</p>
  </div>
  <p>My best friend is Mickey.</p>
</body>

user_142340850

You can to hide all elements excluding .intro using :not selector, and later to display all childs inside .intro.

body *:not(.intro) {
  opacity: 0;
}
.intro > * {
  opacity: 1 !important;
}
<body>

  <h1>Welcome to My Homepage</h1>

  <div class="intro">
    <p id="firstname">My name is Donald.</p>
    <p id="hometown">I live in Duckburg.</p>
  </div>

  <p>My best friend is Mickey.</p>

</body>

user_75696740

You can simply use :not for all the elements you want to show. Simply using :not pseudo class on .intro will not show its child as well since you are using *

* Will select all the elements on that page.

body *:not(.intro):not(#firstname):not(#hometown) {
  opacity: 0;
}

Live Demo:

body *:not(.intro):not(#firstname):not(#hometown) {
  opacity: 0;
}
<body>
  <h1>Welcome to My Homepage</h1>
  <div class="intro">
    <p id="firstname">My name is Donald.</p>
    <p id="hometown">I live in Duckburg.</p>
  </div>
  <p>My best friend is Mickey.</p>
</body>

user_136690480
Related