user3386779 user3386779 - 2 months ago 14
CSS Question

overwrite the css property

I have 2 parent div view 1 and 2. and want to hide the second view but display decription of 2nd view.

desired output is:
title

sample description1

sample description2




.view2{
display:none;
}
.view2 .desc{
display:block !important;
}

<div class="view1">
<div class="title">
<p>Hello</p>
</div>
<div class="desc"> sample description1</div>
</div>
<div class="view2">
<div class="title">
<p>Hello</p>
</div>
<div class="desc"> sample description2</div>
</div>




Answer

Use :not() selector.

Try this

.view2 *:not(.desc) {
  display: none;
}
<div class="view1">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description1</div>
</div>
<div class="view2">
  <div class="title">
  <p>Hello</p>
  </div>
  <div class="desc"> sample description2</div>
</div>

Comments