css selector to select all elements in Page where specific element exists

Question

I am using css media queries in my main css file for printing some page elements. Here is the sample code

body *
    {
        visibility: hidden;
        background: #FFF;      
        margin: 0px;
        padding: 0px;
    }
    #Grid *
    {
        visibility: visible;
    }

But my application is huge and I don't want this to affect the existing functionality. So I only want this css to apply on the pages where <Div> element with id <Grid> exists also writing this in other css file and using in each page would be very time consuming as I need this functionality on about 80 pages.Is there any way to select all body elements where div with id Grid exits in a single css file for all the application ? I am thinking of something like

body [div="Grid"] * {}

but unfortunately this doesn't works.

`div[id="Grid"] *`, which is identical to `div#Grid *`, except less-well supported. Are the relevant elements really children of that element though? — David Thomas, Sep 23 '13 at 14:56

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

AFAIK selecting parent element using child element is not possible in either CSS2 or CSS3.

But you can do this with CSS4, check Is there a CSS parent selector? for more info :) FYI this is not supported in any of the browsers. But just mentioning the code below

body! > div#Grid { 
   background-color:red;
}

Here is the fiddle which shows above example http://jsfiddle.net/M75wZ/

But if you are open to third party JS plugins which enables parent selectors, here is a plugin that does the job https://github.com/Idered/cssParentSelector/blob/master/jQuery.cssParentSelector.js.

But if you just want only for this requirement and want to make it work, do like below

 window.onload = function(){
     var div = document.getElementById('Grid');
     if(div){
        if(document.body.className.indexOf('bodyHasGrid') == -1){
           document.body.className += " bodyHasGrid";
        }
     }
 }

Then apply styles using body.bodyHasGrid

Hope this gives at least an idea of doing it.

edited May 23 '17 at 12:11

Community

1
1

answered Sep 23 '13 at 15:29

Exception

8,111
22
85
136

No, CSS 4 supplies the *syntax* for a parent selector, but not the ability to use it in a browser environment: '[fast vs complete selector profiles](http://www.w3.org/TR/2013/WD-selectors4-20130502/#profiles).' – David Thomas Sep 23 '13 at 15:51
@David Thomas: The unfortunate notion of the existence of a "CSS4" only makes matters worse. The way I see it, Selectors now exists as an independent branch from the rest of the CSS spec, defining a fast profile for CSS implementations, and a complete profile for everyone else. – BoltClock Sep 23 '13 at 16:33
@DavidThomas Have a look at this http://www.w3.org/TR/selectors4/#subject. see selectors overview section last one. – Exception Sep 24 '13 at 16:29
@Exception: yes. I *know*. What you're missing is that while the Selectors module *defines the syntax* for a subject-selector it explicitly does not allow it to be used in the 'fast profile': "CSS implementations conformant to Selectors Level 4 must use the ‘fast’ profile for CSS selection." (Reference: http://www.w3.org/TR/selectors4/#profiles). – David Thomas Sep 24 '13 at 17:00

Mr. Alien · Answer 2 · 2013-09-23T15:02:49.790

Edit:

any way to select all body elements where div with id Grid exits

NOT POSSIBLE WITH CSS as we don't have parent selector yet, so you cannot select any parent based on child element.

Inorder to select the div element, having an id Grid, use the selector below

div[id="Grid"] {
  /* Styles goes here */
}

Demo

Note: Above selector will select only those elements having an id Grid, if you expect to target entire page where an element with the id Grid exist, than you cannot do that.

If you want to target elements uniquely which are on a particular page, than call the same id on body element, and replace div with body and further nest the element you want to target like

body[id="Grid"] div.target_unique {
   /* Styles goes here */
}

Just thinking aloud here... `body:matches(! div#Grid) *` (obviously won't work, ignore) — BoltClock, Sep 23 '13 at 15:08

css selector to select all elements in Page where specific element exists

2 Answers2