2

オカレンスが1つしかない場合に、特定のスタイルを要素に適用するCSSセレクター(CSS3 +で問題ありません)はありますか?

たとえば、次のCSSルール:

border: 1px solid black;

... HTMLに.infoが1つしかない場合にのみ、 .infoに適用されます。

それで、

<p class="info">This would have a border because there is only one</p>

と、

<p class="info">This would not have a border because there are two</p>
<p class="info">And neither would this</p>

プログラムで次のような追加のクラスを適用する必要があると思います:.single-occurrenceまたはJavascriptで発生数をカウントしますか?

編集:

いくつかのことを片付けましょう。

私がやろうとしていることの解決策としてJavascriptについて言及するとき、それは私がそれを使用するという意味ではありません。私は、振る舞いをしないものについてはJSを避けようとします。だから私はJavascriptの答えを望んでいません、それは信じられないほど簡単に達成できます-私の質問はCSSについてです。

また、混乱している人には、ページにクラスが1つしかない場合があるのは、実際に使用しているクラスがsearch-resultであるためです。結果が1つしかない場合もあります。ただし、1つしかないからといって、そのアイテムがsearch-resultと呼ばれるオブジェクトのクラスの一部になれないという意味ではありません。意味的に(そして論理的に)、もちろん、1つのアイテムのクラスが存在する可能性があります。時には、包括的なルールを適用するのではなく、セマンティクスについてもう少し考えるべきだと思います。

4

4 に答える 4

4

:only-of-typeページの構造によっては、疑似クラスを使用できる場合があります。これは、要素に同じタグ名の兄弟がない場合に一致します。それ以上に具体的にする方法はないと思います。

于 2012-04-22T07:27:40.753 に答える
0

これに対するCSSソリューションはありません。私はあなたのJavaScriptのアイデアに行きます。jQueryを使用する場合は、次のようなものを使用できます。

$('.info').length

ここにCSS3疑似クラスのリスト:http://reference.sitepoint.com/css/css3psuedoclasses

于 2012-04-21T10:22:23.953 に答える
-1

このソリューションはどうですか。

CSS

.info.highlight { border: 1px solid black }

JavaScript(jQueryを使用)

var $info = $('.info');
if ($info.length === 1) { $info.addClass('highlight'); }

デモンストレーション: http: //jsfiddle.net/joshdavenport/YdbuB/

于 2012-04-21T10:33:43.357 に答える
-3

こんにちはそれは間違った構文で遅い答えです、しかしあなたがn番目のようなセレクターを使うなら...いくつかの非常に悪いコーディングであなたはあなたの結果を得るかもしれません

于 2018-07-04T04:25:25.250 に答える