CSS display none for class name when alone

Question

I want to set the display option to none for a css class when it is alone but it also hides the element when it is used with another class.

so here is how the html looks like when I want to show the biography class:

<div class="user biography">
  <p>Content</p>
</div>

and here I want the biography class to be set to display:none when it is alone (not with user class):

<div class="biography">
  <p>should hide</p>
</div>

but if I do :

.biography{
  display: none;
}

it hides the biography class in both cases. How can I hide it when it is alone and not with user class?

Answer 1

You can use attribute selector [class='biography'] and this will match all elements that have class with exact value of biography

[class='biography'] {
  display: none;
}

<div class="user biography">
  <p>Content</p>
</div>
<div class="biography">
  <p>should hide</p>
</div>

Answer 2

You can use the attribute selector to see if the class matches that name exactly

[class="biography"] {
  display: none;
}

Only elements with class="biography" will be matched.

Answer 3

You need to use :not pseudoselector:

.biography:not(.user){
  display: none;
}