Set display none for class name when it's alone

If you want to add the css property display:none for a class name when it's alone, then in this article, I will share two different ways to do that.

Suppose, you have a <div> element with two classes show and hide.

<div class='show hide'>Computer Science</div>

If the hide class is alone, we will hide the <div> element using the display:none property.

But in the other case, if the both classes are present in the div element, we will show the div element.

Example 1 :

<style>
  [class='hide'] {
    display: none;
  }
</style>

<div class="show hide">
   Computer Science
</div>
<div class="hide">
  Hidden Computer Science
</div>

Example 2 using :not() pseudo selector. #

<style>
  .hide:not(.show){
    display: none;
  }
</style>
<div class="show hide">
   Computer Science
</div>
<div class="hide">
  Hidden Computer Science
</div>

Example 3 :

<style>
  .hide{
    display: none;
  }
  .show.hide{
    display: block;
  }
</style>
<div class="show hide">
   Computer Science
</div>
<div class="hide">
  Hidden Computer Science
</div>