CODEWITHSUNDEEP
csscss-selectors
Dancer
Dancer

Reputation: 17651

css :not with wildcard *

Is it possible to do something similar to below without filling my document with show and hide classes:

 body.vnu-hours-sel *:not(#results-content) {
    visibility:hidden;

  }

basically everything within .vnu-hours-sel apart from a div with the id results-content needs to be hidden (print style sheet!)

Upvotes: 1

Views: 1259

Answers (2)

Paulie_D
Paulie_D

Reputation: 114991

Yes.

Clearly this works if your target is a direct child of the parent.

.vnu-hours-sel *:not(#results-content) {
  visibility: hidden;
}
<div class="vnu-hours-sel">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="results-content">Content</div>
</div>

Otherwise you will need to reset the visibility of the target to override the hidden value of it's ancestor.

.vnu-hours-sel *:not(#results-content) {
  visibility: hidden;
}

.vnu-hours-sel #results-content {
  visibility: visible;
}
<div class="vnu-hours-sel">
  <div>
    <div id="one">One</div>
    <div id="two">Two</div>
    <div id="results-content">Content</div>
  </div>
</div>

If you need this just for a print style use a media query

@media print {
  /* code here */
}

Upvotes: 2

Edorka
Edorka

Reputation: 1811

Would work even without the * 

body :not(#test) {
    visibility:hidden;
}

https://codepen.io/Edorka/pen/VwwRGmx

Upvotes: 1

Related Questions