Hide all div of particular class except one using CSS only

Question

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.

.ref .msg add a space between both the classes, your code states that div with the class of ref & msg together. hence insert a space between .ref .msg — Domain
– Domain, Commented Sep 14, 2015 at 9:23
I suspect this is not possible as there is no parent selector which I think is required here as :not only accepts simple selectors. — Paulie_D
– Paulie_D, Commented Sep 14, 2015 at 9:23
@WisdmLabs still not working after adding space between classes — Oomph Fortuity
– Oomph Fortuity, Commented Sep 14, 2015 at 9:25
There is no single selector that can do this...see the answers below. — Paulie_D
– Paulie_D, Commented Sep 14, 2015 at 9:34

Frnnd Sgz · Accepted Answer · 2015-09-14 09:41:18Z

6

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>`

edited Sep 14, 2015 at 9:41

answered Sep 14, 2015 at 9:27

Frnnd Sgz

3281 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oomph Fortuity Over a year ago

No doubt,It's working But Could we do it in single styling?

Frnnd Sgz Over a year ago

I think that having you're structure if code is quiet difficult to do it in a single styling rule, note that you have you're "ref" class div inside another div what means that you're working in differents levels. You will need the code that I add on the edit note to apply the 'not' rule

Shibin Joseph · Accepted Answer · 2015-09-14 15:25:53Z

2

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.

answered Sep 14, 2015 at 15:25

Shibin Joseph

994 bronze badges

Comments

m4n0 · Accepted Answer · 2015-09-14 09:30:10Z

1

.msg { display:none; }

.ref .msg { display:block; }

This should be working.

edited Sep 14, 2015 at 9:30

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Sep 14, 2015 at 9:29

Mg Thar

1,11210 silver badges25 bronze badges

Collectives™ on Stack Overflow

Hide all div of particular class except one using CSS only

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related