0

I have this weird situation that I cannot make work :not that has two condition. Basically I want to hide all div in a container except those having specific class.

For example this is the html

<div id="container">

  <div class="show"></div>
  <div class="extra"></div>
  <div class="about"></div>

  <div class="sample1"></div>
  .
  .
  .
  <div class="sampleetc"></div> 
</div>

Now my css expression is like this , but it is not working

 #container > div:not(.show), #container > div:not(.about){
     display:none;
   }

Any ideas why it is not working or good css expression for this, i presume, :not does not work with two condition, or i am guessing the first expression already hide .about

Knu
  • 14,469
  • 5
  • 56
  • 88
Drixson Oseña
  • 3,603
  • 3
  • 21
  • 34

2 Answers2

3

I believe you can just chain the :not selector like this:

div#container > div:not(.show):not(.about)
{
    display: none;
}

It appears to work correctly on this fiddle.

Marty
  • 38,275
  • 19
  • 91
  • 162
1

This is what you want. Hide all inside the container but div.show and the next one

   #container > div:not(.show) + div{
     display:none;
   }

DEMO

LOTUSMS
  • 9,807
  • 15
  • 57
  • 123