Menu
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.
487
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>`
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
