否定擬似クラス

セレクター内の要素で特定の条件以外の要素を選択できるのが「否定擬似クラス」。
セレクターの後ろに“:not(…)”を付け、(…)内に除外する条件を記述する。

※ セレクターの後ろに” : “を付けて条件指定をする方法を、擬似クラスというんですね！

<script type="text/javascript">
   $(function(){
      $("li:not(: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>

最初に登場するli要素(1番目のli要素)以外のli要素、
つまり2番目以降のli要素が#9cfの色になる。

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

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

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

CSS3のセレクター – 隣接セレクター

CSS3のセレクター

jQueryは、現在策定中のCSS3のセレクターの多くにも対応している。

隣接セレクター

特定のセレクターの後に出現する要素を選択できるのが「隣接セレクター」
セレクターの要素を、“~（チルダ）”で結びます。

<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　11:33 PM｜ カテゴリー ： jQuery｜ コメント

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