Kozackman Lab

only-child擬似クラス

セレクターに特定の要素が１つだけ含まれる場合、「only-child擬似クラス」で選択できる。
セレクターの後ろに“:only-child”と記述する。

<script type="text/javascript">
   $(function(){
      $("span:only-child").css("color","#9cf");
   });
</script>

<ul>
   <li><span>テキスト1</span>テキスト1テキスト1</li>
   <li><span>テキスト2</span>テキスト2<span>テキスト2</span></li>
   <li>テキスト3テキスト3テキスト3</li>
   <li>テキスト4テキスト4テキスト4</li>
</ul>

1番目のspan要素だけが#9cfの色になる。
2番目のli要素にはspan要素が複数含まれるため、対象にならない。

下記は上記ソースコードの結果、

• テキスト1テキスト1テキスト1
• テキスト2テキスト2テキスト2
• テキスト3テキスト3テキスト3
• テキスト4テキスト4テキスト4

2012/08/30　4:04 AM｜ カテゴリー ： jQuery｜ コメント