CSS :not() selector - Hide everything from body except one div
Question
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>
3 answers
solution1
4 ACCPTED 2020-09-22 07:03:29
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>
solution2
1 2020-09-22 06:27:16
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>
solution3
1 2020-09-22 06:39:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.