CODEWITHSUNDEEP
htmlcsscss-selectors
Oomph Fortuity
Oomph Fortuity

Reputation: 6108

Hide all div of particular class except one using CSS only

I have below HTML and I want to hide all divs having class 'msg' excluding one div having same class.

<html>

<div class="ref" >
    <div class="msg">  Message ref </div>
</div>

<div class="msg">  Message 1 </div>
<div class="msg">  Message 2 </div>
<div class="msg">  Message 3 </div>

</html>

Here I want to hide all div having class 'msg' except div which is inside another div having class 'ref' using css only.

My style for that is 

.msg:not(.ref.msg) {
     display: none;
}

But it is not working.Please suggest me some required tweaks to my CSS style to achieve result.

Thanks.

Upvotes: 4

Views: 8975

Answers (3)

Shibin Joseph
Shibin Joseph

Reputation: 99

Try the below code:

CSS

.ref :not(.msg) {
    display: none;
}

Html

<div class="ref" >
    <div class="msg">  Message ref 1 </div>
</div>
<div class="ref" >
    <div class="msg1">  Message ref 2 </div>
</div>
<div class="msg">  Message 1 </div>
<div class="msg">  Message 2 </div>
<div class="msg">  Message 3 </div>

make sure you add a space after .ref class.

Upvotes: 2

Frnnd Sgz
Frnnd Sgz

Reputation: 328

You can try this

<style>
    .msg{
     display: none;
    }
    .ref .msg{
     display: block;
    }

</style>

Edit Note: If you want to apply the 'not'rule I think you would need this structure

<style>
    div:not(.ref){display: none;}
</style>
<div class="msg ref">  Message ref </div>
<div class="msg">  Message 1 </div>
<div class="msg">  Message 2 </div>
<div class="msg">  Message 3 </div>`

Upvotes: 6

Mg Thar
Mg Thar

Reputation: 1102

.msg { display:none; }

.ref .msg { display:block; }

This should be working.

Upvotes: 1

Related Questions