web-dev-qa-db-ja.com

CSSを使用してスペースのみを含む要素を非表示にする

自動生成されたHTMLドキュメントで次の要素を非表示にしようとしています。

  <p id="sitspagedesc" class="sitspagedesc">

    </p>

一部のページでは、<p>タグには内部値が含まれますが、他の例では、例に示すようにスペースのみを含めることができます。 HTMLの変更はオプションではないため、CSSのみを使用して非表示にする方法を見つける必要があります。

私はそれを使ってそれを隠そうとしました

.sitspagedesc:empty
{
display:none;
}

しかし、おそらく要素に含まれるスペースのため、これは機能しません。

誰か良いアイデアはありますか？

ありがとう:)

htmlcsshidepseudo-class
24
Andy Kaufman

純粋なCSSではそれができないと思います。

しかし、少しのJavaScriptでそれを行うことができます。

var allParas = document.getElementsByTagName('p');
//filter by class name if desired...
for(var i=0;i<allParas.length;i++){
  if(allParas[i].getElementsByTagName('*').length == 0){
    allParas[i].style.display = 'none';
  }
}

JQueryにアクセスできる場合は、組み込みのセレクターを使用してフィルタリングを行う方が少し簡単です。

$('p.sitspagedesc').each(function(){
  if($(this).children().length == 0){
    $(this).hide();
  }
});
10
scunliffe

空白が無視されることを除いて、:emptyセレクターの機能を模倣したい場合、受け入れられた回答（ scunliffe ）はうまく機能しません。子要素のみをチェックし、これは選択した要素内の直接のテキストを考慮しません。たとえば、<p>Hello World!</p>には空白以外のテキストが含まれていても子要素がないため、空として扱われます。

私のソリューションは jQuery.trim（） 関数を使用して、選択した要素とその子孫の結合されたテキストコンテンツを含む 。text（） 値から先頭と末尾の空白を削除します。したがって、空白以外のテキストと子要素が含まれていない場合、選択した要素は非表示になります。 ：emptyセレクターと同様に、HTMLコメントは.text（）または.children（）値のいずれにも反映されないため、コンテンツとしてカウントされません。

$('p.sitspagedesc').each(function(){
    if($.trim($(this).text()) == '' && $(this).children().length == 0){
        $(this).hide(); 
    }
});

Fiddle at https://jsfiddle.net/TNTitan89/crejkbxq/ を参照してください。

7
Garland Pope

回答：まだではありませんが、下書きです

https://drafts.c​​sswg.org/selectors-4/#the-blank-pseudo

...そして、少なくともMozillaの場合、すでに接頭辞付きの実装があります... :-moz-only-whitespace：

http://jsfiddle.net/peayLrv3/

5
Frank Nocke

:emptyセレクターは確かに非常に厳密です。スペースを含む要素は空とは見なされません。だから2つの解決策があります

  1. 出力を変更します。出力する値をトリミングするか、HTMLを最小化して、それらのスペースを削除します。またはさらに良い：それらの要素をまったくレンダリングしないでください。トラフィックを最小限に抑え、JavaScriptなしで機能するソリューションを提供するため、これが最良のオプションだと思います。
  2. JavaScriptを使用して、これらの要素を見つけます。これらの要素を簡単に見つけられるようなトリックは知らないので、すべての要素を調べて、空だと思われる要素を検索し、それらの要素にクラスを追加する必要があるかもしれません。これは、特にローエンドデバイスでは非常に遅くなる可能性があります。また、スクリプトが実行されたときにのみ要素が非表示になるため、ページの読み込み時に、要素が非表示になるまでしばらく表示されます。これは理想的な解決策ではないことは明らかです。

たぶん両方を組み合わせることができます。 :emptyセレクターはCSS3セレクターであり、IE8以前ではまだサポートされていないため、これらのブラウザーでは、空の要素がまったくレンダリングされないようにサーバー側のスクリプトを修正できない限り、JavaScriptフォールバックが適切な場合があります。レンダリング中に特別なクラスが与えられるため、JavaScriptは必要ありません。

3
GolezTrol

標準ではありませんが、Firefoxには " ：-moz-only-whitespace "があります。

また、いくつかの「将来の校正」について、 css-tricks は、CSSセレクターレベル4ドラフトの一部となる:blankセレクターについて言及しています。現在のブラウザではサポートされていませんが、可能性はあります。

0
Fewfre

純粋なCSSで空の要素を検出する方法はまだありません（まだ）。 JavaScriptがオプションでない場合、ブラウザに到達する前にサーバーサイドでHTMLを操作するためにできることはありますか？

0
A.M. D.

これが、jQuery 1.5.xを使用してクライアントに実装したソリューションです。//skip empty tags but which are valid正規表現文字列を調整する必要がある場合があります。

$('*:only-child:empty').each(
    function(index) {
        var currentElement = $(this);
        // skip singleton tags
        if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        // skip empty tags but which are valid
        if(/^(?:textarea)$/i.test(currentElement.get(0).tagName) == true) {
                return
        }
        while (currentElement.parent().children().length == 1) {
            currentElement = currentElement.parent();
        }
        // so 0 or more children for the parent then we hide it
        // we will never have more then 0 children though the :empty takes care of that
        console.log('hidding: ' + currentElement);
        currentElement.hide()
    }
);
0
Daniel Sokolowski