only-child疑似クラス

CSS3セレクター only-child疑似クラス

セレクターに特定の要素が含まれる場合、only-child疑似クラスで指定できます。

下記の例では
li要素の中にspan要素が1つだけの場合にspan要素のCSSプロパティーを変更させます。

■javascript

$(function(){
$("li span:only-child").css("color","red")
});

■HTML

<ul>
<li>テキスト<span>テキスト</span>テキストテキストテキストテキスト</li>
<li>テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキストテキスト</li>
<li>テキスト<span>テキスト</span>テキストテキストテキストテキスト</li>
<li>テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキストテキスト</li>
</ul>

■表示結果

  • テキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキスト

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です