Kozackman Lab

first-child擬似クラス

特定のセレクターのうち、最初に登場する要素を指定するセレクターとして
「first-child擬似クラス」がある。

セレクターの後ろに:first-childと記述して指定する。
セレクターに含まれる要素の親要素が複数存在する場合は、
それぞれの最初に出現する子要素が選択される。

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

<ul>
   <li>テキスト1テキスト1テキスト1</li>
   <li>テキスト2テキスト2テキスト2</li>
   <li>テキスト3テキスト3テキスト3</li>
   <li>テキスト4テキスト4テキスト4</li>
</ul>
<ul>
   <li>テキスト5テキスト5テキスト5</li>
   <li>テキスト6テキスト6テキスト6</li>
   <li>テキスト7テキスト7テキスト7</li>
   <li>テキスト8テキスト8テキスト8</li>
</ul>

2つのul要素のそれぞれに最初に登場するli要素、
つまり1番目のli要素が#9cfの色になる。

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

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

• テキスト5テキスト5テキスト5
• テキスト6テキスト6テキスト6
• テキスト7テキスト7テキスト7
• テキスト8テキスト8テキスト8

2012/08/29　11:10 PM｜ カテゴリー ： jQuery｜ コメント