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｜ コメント

隣接セレクター

特定の要素の次に出現する要素を選択できるのが隣接セレクター。
隣接セレクターは隣接する要素を“+（プラス）”で指定する。

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

<ul>
   <li id="first">テキスト1テキスト1テキスト1</li>
   <li id="second">テキスト2テキスト2テキスト2</li>
   <li id="third">テキスト3テキスト3テキスト3</li>
   <li id="fourth">テキスト4テキスト4テキスト4</li>
</ul>

id属性が「second」の要素の次に出現するli要素、
つまり3番目のli要素の色が#9cfの色になる。

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

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

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

CSS2のセレクター – 子セレクター


IE6など、一部のWebブラウザーが対応していないCSS2のその他のセレクターも、
jQueryでは利用できる。

特定の要素の直下に配置された要素を選択できるのが、「子セレクター」
子セレクターは、親要素と子要素を“>（大なり）”で結ぶ。

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

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

1番目のli要素の子要素であるstrong要素が#9cfの色になる。
3番目のli要素はdiv要素の直下に配置されているので、strong要素があっても反映されない。

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

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

2012/08/29　1:39 AM｜ カテゴリー ： jQuery｜ コメント

グループセレクター

複数のセレクターを” ,(カンマ) “区切りで並べて指定できるのが「グループセレクター」。
それぞれのセレクターに対する命令をまとめて記述できる。

class属性が「first」の1番目のli要素と、「third」が設定された3番目のli要素が#9cfの色になる。

<script type="text/javascript">
   $(function(){
      $("#one, #three").css("color","#9cf");
   });
</script>

<ul>
   <li id="one">テキスト1テキスト1テキスト1</li>
   <li id="two">テキスト2テキスト2テキスト2</li>
   <li id="three">テキスト3テキスト3テキスト3</li>
   <li id="four">テキスト4テキスト4テキスト4</li>
</ul>

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

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

2012/08/28　2:33 AM｜ カテゴリー ： jQuery｜ コメント

ユニバーサルセレクター


すべての要素を選択できるのがユニバーサルセレクター。
ユニバーサルセレクターは“* (アスタリスク)”で記述する。

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

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

li要素に含まれているすべての要素、つまり１番目のstrong要素と2番目のem要素、
3番目のspan要素が「#9cf」の色になる。

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

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

2012/08/28　1:49 AM｜ カテゴリー ： jQuery｜ コメント

« 古い記事 新しい記事 »