Is there a way to hide all content on a page except for a specific element and its children using CSS?
I've been exploring the :not selector, but I'm struggling to make it work with the * selector.
:not(.list-app) {
display: none;
}
:not(.list-app *) {
display: none;
}
The code above successfully targets the parent ".list-app" element, but I'm having trouble targeting its children.
Any suggestions or ideas to achieve this?
It doesn't seem feasible using solely CSS, unless resorting to a less than ideal workaround.
According to the Selectors 3 specification, the use of :not() necessitates a simple selector, which is why your initial approach isn't effective.
One potential workaround could involve implementing a straightforward override, yet there's a significant drawback: all descendants of the "excluded" parent would have to be overridden with the same display attribute:
body * { display: none; }
.list-app, .list-app * {
display: block !important; /* Each child now displays as block */
}<span>Hello world</span>
<div class="list-app">
<span>Hi world</span>
</div>To gain further insights into the rationale behind this workaround's limitation, we can turn to an insightful response by BoltClock, addressing a related query from an earlier period:
A web browser's default styles are outlined in its user agent stylesheet, accessible through various sources as highlighted here. Regrettably, the Cascading and Inheritance level 3 spec does not present a method to restore a style property to its default browser setting. Nonetheless, plans are underway to reintroduce a keyword for this purpose in Cascading and Inheritance level 4, although the working group has yet to finalize the nomenclature for this keyword (the current link mentions
revert, but it remains subject to change). Details regarding browser compatibility withrevertcan be found on caniuse.com.Although the level 3 spec introduces an
initialkeyword, utilizing this to set a property to its initial value resets it to the default value defined by CSS standards, rather than that specified by the browser. The default value fordisplayisinline; this is stipulated here. Theinitialkeyword corresponds to this standard value, not the one mandated by the browser.
During my HTML layout creation process, I encountered a peculiar positioning issue that proved difficult to resolve. Consider the following HTML structure: <div class="outer-wrap"> <div class="header"> I am a Header </div> <div c ...
My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or ar ...
Currently, I am working on developing a basic website using Laravel and Vue.js. To ensure that the website is responsive, I integrated Bootstrap 4 into the project. For the most part, everything appears to be functioning correctly - the navbar collapses as ...
I attempted to center a div containing 2 photos perfectly in the center, but encountered some issues. Despite trying various positioning techniques such as display: flex, align-items, justify-content, and more, I couldn't get the image container to mo ...
I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...
I currently have a CSS gradient applied and I am interested in creating an image or SVG file from it. However, I am unsure of how to accomplish this task. Any advice would be greatly appreciated. background: -webkit-linear-gradient(bottom, rgb(211, 208, ...
I'm currently facing an issue where I want a divider to adjust its size when another divider changes size due to new content being loaded into it. However, even after binding the resize event handler to the divider that loads the content, the event do ...
https://i.stack.imgur.com/tCuL6.png I am hoping that this image will provide a visual aid for what I am trying to convey. My goal is to have the arrow and the boxes aligned in a row without any empty space on the right side. As you can see, the leftmost b ...
Using HtmlSpanner with CSS for TextView I recently discovered a library called HtmlSpanner that claims to assist in adding an HTML string with CSS to a TextView. However, I am struggling to locate any detailed documentation on how to achieve this, except ...
Is there a way to loop through required fields marked with <input class="required">? Currently, only the first input in the loop is being evaluated. How can I traverse the DOM using a loop to check all input boxes? Thank you for your help. While I ...
Seeking alternative ideas to replace my current solution using only CSS for one of the problems. I already have a working JS solution, but I'm interested in exploring a CSS-only approach. https://i.sstatic.net/PQ7er.png A) All elements here have the ...
I'm struggling with aligning a flexbox list. I have a row of 3 elements, but when there are only 2 elements on the row, there's a gap in the middle. My goal is to have a row with 2 elements look like x x o. However, my current code displays the ...
While performing some maintenance on a website, I noticed that one page is not displaying correctly. There is a container div for a column on the left and a container div for content on the right, both within an overall page content container. Below these, ...
I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...
I am attempting to create a page layout with text that should look like this: Team Name My Team Name +-------------+ Division Team Division| | Current Ranki ...
My Request I need a button that can accommodate both long and short labels, with the text getting cut off at 700px using ellipses. The button should adjust to the available space when the viewport is smaller than 700px. The length of the label can vary gr ...
I'm looking to create a grid layout with fixed-sized images, but I'm having trouble getting them to fill up the space properly. Here's what I want: Unfortunately, this is what I'm currently getting: Any suggestions on how I can make t ...
I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the backgr ...
I am looking to update the appearance of an HTML table. Currently, it looks like this: Here is the code snippet: <div className="student-schedule"> <table className="student-calendar-table"> [...] </table&g ...
I'm attempting to apply a custom class to a div that should only be active on "md" screens. However, it doesn't seem to be working - <div className="md:myclass"/> tailwind-config.ts theme: { screens:{ 'sm': { ...