コンテンツ認識CSS - コンテンツが利用可能な場合にのみスタイルを適用します。

CSSスタイルは、適用されている要素に何らかのコンテンツが含まれているかどうかを認識できますか？表示されたようにコンテンツ認識CSS - コンテンツが利用可能な場合にのみスタイルを適用します。

<table> 
<tr> 
    <td class="someClass">Test value 1</td> 
    <td class="someClass">Test value 2</td> 
</tr> 
<tr> 
    <td class="someClass">Test value 3</td> 
    <td class="someClass"></td> 
</tr> 
</table>

、表のセルを空のままにされている可能性があるとして、私は現在、各セルのためのCSSを使用した（エンドユーザーがページを作成するために、CMSを使用するために強制的に）テーブルを使用しています。 "someClass"にこれを認識させ、このセルにスタイルを適用しない方法がありますか？

私は適用可能なjsハックがあると確信していますが、純粋なCSSで可能かどうか疑問です。ロングショット？

ありがとうございました。

出典

2012-01-30 mspir

これを試してください 'td：not（：empty）' – mgraph

どのようなスタイルが欲しいですか？あなたは 'empty-cells：hide;'を持っています。これはセルの境界線を隠します。 –

ありがとうございます。：not（：empty）私のために働く！ – mspir

単にそのよう:empty擬似クラスを使用しますあなた JSが必要です（これはおそらくあなた自身であると思います）。さもなければ、上記のCSSルールは正常に動作します。

あなたは、私がそのことを考えることができる唯一のことは、あなたの質問に関連:not()と:emptyhere

出典

2012-01-30 11:58:10 BoltClock

いいえ、純粋でクロスブラウザ cssはありません。自分のCMSを編集するか、javascriptを使用する必要があります。ペトル・マレクは、それがクロスブラウザのソリューションとして非常に信頼性がありません言及し、もしそうなら、あなた必見サポート古いブラウザ（IE8およびそれ以前）のよう

td.someClass:not(:empty) { 
    /* Styles */ 
}

：

出典

2012-01-30 11:55:30 mreq

技術的には、この回答は真です。しかし、多くの人が '：not 'のために[基本サポート]（https://developer.mozilla.org/en-US/docs/Web/CSS/:not）を欠いているブラウザを使用する人はほとんどいません。 –

のブラウザの互換性を見つけることができますが、そのような空のように擬似クラスです。ここでは一例です：最近のブラウザで

<html> 
    <head> 
    <title>Example</title> 
    <style type="text/css"> 
     .cell:not(:empty) { 
     background-color: red;  
     } 
     .cell:empty { 
     background-color: blue; 
     } 
    </style> 
    </head> 
    <body> 
    <table><tBody> 
     <tr><td class="cell"></td><td class="cell">Not empty</td></tr> 
     <tr><td class="cell">Not empty</td><td class="cell"></td></tr> 
    </tBody></table> 
    </body> 
</html>

、あなたは空のセルは青であり、コンテンツを持つ細胞が赤であることがわかります。ここでのキーは、CSSの最初の行で、.cell：not（：empty）です。これは、要素にpsuedo-class：emptyが適用されていない場合にCSSを適用します。

出典

2012-01-30 12:00:22 Shane

コンテンツ認識CSS - コンテンツが利用可能な場合にのみスタイルを適用します。

答えて

関連する問題