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.
I need some help adding a sub-menu to my drop-down function. I'm not very familiar with CSS, so I'm struggling to figure out how to do it. Ideally, I want the sub-menu to open to the right when the cursor hovers over it. Below is the CSS and HTML ...
I am looking to update the background design of Mui Datagrid from this image to this image However, I am encountering an issue where the background color does not fully cover the header. I have attempted using "cellClassName:" in the columns but it has n ...
I am diving into my first project using Bootstrap and am currently in the process of setting up the navbar. My goal: When the XS model is activated, I want to adjust the font size of the header, modify the height of the navbar, and left-align the header. ...
Is there a way to have the Bootsrap mobile menu automatically unfold when a link (anchor on the same page) is clicked? The menu unfolds with class navbar-collapse collapse in The menu folds with class navbar-collapse collapse out I already have an oncl ...
I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it. However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibi ...
I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...
I've been feeling frustrated lately as I've been dedicating the past few days to migrating my React application from JavaScript to TSX. While I appreciate the type checking that TSX provides, I'm struggling with understanding how to implemen ...
As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...
Currently facing an issue with setting an image for background in Ionic. The code provided doesn't seem to be working as expected. It appears that the style sheet is not being applied correctly. Not sure where exactly to add the style sheet or how to ...
Currently utilizing Bootstrap 3 and AngularJs for this project. Implementing the following markup for the input field with type 'search': <input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model=&apo ...
map.css({ 'zoom': zoom, 'left': map.width()/(2*zoom) - (point[0]/100)*map.width(), 'top': map.height()/(2*zoom) - (point[1]/100)*map.height() Upon observation, it appears that Chrome adjusts the map zoom first be ...
I have a lineup of elements which I showcase in a grid format, here's how it appears: https://i.stack.imgur.com/JLCei.png Each element represents a part. The small pictures are essentially background-images that I dynamically set within my html. Up ...
I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side Here is the code I am using: <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layo ...
I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...
I am currently developing a website that features changing background images. I am looking to have the text on the site mimic the color of the backgrounds, but not so much that it becomes difficult to read. How can I make the text transparent in this man ...
.custom-highlight { display: inline; font-weight: 500; font-size: 15px; } .item-list { border: 1px solid #b1b8c9; color: $color-grey-light; font-size: 14px; display: inline-block; margin-right: 8px; padding: 5px 20px; border-radius: 4p ...
I am uncertain if achieving this purely with CSS is possible, but it would be ideal. I currently have an image: <img src="#" class="article-thumb"> CSS: .article-thumb { height: 55%; } Is there a way to set the width equal to the height? My g ...
In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...
The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...
Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...