テキストノードを非表示にする他の子要素を非表示にするCSSセレクタ

Question

CSSでは、どのようにしてテキストThis Textを選択しますか？私はそれを削除/非表示にしたい。

私はHTML自体を変更することはできません。CSSを変更するだけです。

<h2 class="hello"> 
 
     This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 1

あなただけのテキストを非表示にする場合、私は考えることができる。この

.hello { 
 
    font-size: 0; 
 
} 
 

 
.mark { 
 
    font-size: 30px; 
 
}

<h2 class="hello"> 
 
     This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 2

ような何かを行う唯一の方法は、オーバーライドになりますspanは外側のdivを隠した後に内側にあります。このような何か：

.hello .mark { 
 
    visibility: visible; 
 
} 
 

 
.hello { 
 
    visibility: hidden; 
 
}

<h2 class="hello"> 
 
    This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 3

はここで別の場所に適用される任意のfont-sizeスタイリングを上書きしませんvisibilityを使用して、別のアイデアです。

この方法の若干の潜在的な欠点は、.helloを相対位置に変更することで、適用したレイアウトが上書きされる可能性があります。

私はこれがfont-sizeを上書きする可能性は低いと考えています。

.hello { 
 
    visibility: hidden; 
 
    position: relative; 
 
} 
 

 
.hello .mark { 
 
    visibility: visible; 
 
    position: absolute; 
 
    left: 0; 
 
}

<h2 class="hello"> 
 
    This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

Answer 4

font-size: 0またはvisibility: hiddenの両方が親を "隠す" ために使用することができます。これらの方法を組み合わせる

は大きなメリットがあります：

• visibility: hidden選択したときに、それがクリップボードにコピーされないという方法で、テキストを非表示にします。
• font-size: 0は、可視性を操作した後に残るスペースを処理します。これは、親を相対的に配置し、子供を絶対的に+ top: 0にすることで修正することもできます。しかし、ポジショニングを乱すと、遅かれ早かれ問題が起こるでしょう。
• とにかくフォントサイズを定義することは悪い考えではありません。

.hello { 
 
    visibility: hidden; 
 
    font-size: 0; 
 
} 
 
.mark { 
 
    visibility: visible; 
 
    font-size: 1.5rem; 
 
}

<h2 class="hello"> 
 
    This Text 
 
    <span class="mark">05/03/2017 3:29 PM EDT</span> 
 
</h2>

---

これはSteven Moseley'sとMehul Mohan's答えを兼ね備えています。