単独の場合はクラス名のCSS表示なし

Question

cssクラスの場合は表示オプションをnoneに設定したいが、別のクラスで使用する場合は非表示にする。それは（ユーザー・クラスではない）のみであるとき

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

、ここでは、私は伝記クラスはdisplay:noneに設定するとしますので、ここで

は、HTMLは、私は伝記クラスを表示したい場合にどのように見えるかです：

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

が、私がしなければ：

.biography{ 
    display: none; 
} 

それは伝記クラスを隠します両方の場合において。ユーザークラスではなく、単独ではどのように非表示にできますか？

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

Answer 1

あなたはattribute selector[class='biography']を使用することができ、これはbiography

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

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

Answer 2

属性セレクタを使用してそのクラスがその名前に正確に一致するかどうかを確認してください。

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

class="biography"の要素のみが一致します。両方のクラスが存在しているなし：：私は要素があるときに、デフォルトでdisply:noneとdisplay:blockを使うべきだと思う

<div class="user biography"> 
    <p>Content</p> 
</div> 
<div class="biography hidden"> 
    <p>should hide</p> 
</div> 
<style> 
.biography.hidden { 
    display: none; 
} 
</style> 

Answer 3

の正確な値を持つクラスを持っているすべての要素にマッチします：あなたは:not pseudoselectorを使用する必要が

Answer 4

一つの解決策は、第二のクラスを追加し、表示のみを適用しないことであろうクラス内でもクラスでも可能です。だから、あなたはこれを行うことができます。

.user.biography { 
 
    display: block; 
 
} 
 

 
.biography { 
 
    display: none; 
 
}

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

 

 

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

Answer 5

.biography { 
    display: none; 
} 

.biography.user { 
    display: block; 
} 

Answer 6