jQuery
headerフィルターは、h1〜h6までのheading要素をまとめて選択できるフィルター。
<script type="text/javascript">
$(function(){
$(":header").css("color","#9cf");
});
</script>
<h1>テキスト1テキスト1テキスト1</h1> <p>テキスト2テキスト2テキスト2</p> <h6>テキスト3テキスト3テキスト3</h6>
1行目のh1要素、3行目のh6要素が#9cfの色になる。
テキスト2テキスト2テキスト2
セレクターの中から特定の順番の要素を「eqフィルター」(equal)で、
特定の要素より前の要素を「ltフィルター」(less than)で、
後の要素を「gtフィルター」(greater than)で選択できる。
要素は登場する順番を数値で指定する。
JavaScriptは0から数値を数えるため、
1番目の要素の場合は「0」、2番目は「1」、３番目は「2」…といった具合に
[実際の数字]-1と指定する。
<script type="text/javascript">
$(function(){
$("li:lt(2)").css("color","#9cf");
$("li:eq(2)").css("color","#6F9");
$("li:gt(2)").css("color","#99F ");
})
</script>
<ul>
<li>テキスト1テキスト1テキスト1</li>
<li>テキスト2テキスト2テキスト2</li>
<li>テキスト3テキスト3テキスト3</li>
<li>テキスト4テキスト4テキスト4</li>
</ul>
2番目よりも前のli要素(ltフィルター)、0,1番目のli要素が#9cfの色になる。
2番目(2+1)のli要素(eqフィルター)が、#6F9の色になる、
2番目(2+1)よりも後の要素(gtフィルター)の色は#F9fになる。
セレクターの中から偶数番目に出現する要素を「evenフィルター」で、
奇数番目に出現する要素を「oddフィルター」で指定できる。
ただし、JavaScriptでは、数字を0から数えるので、最初の要素は1ではなく0になる。
<script type="text/javascript">
$(function(){
$("li:odd").css("color","#9cf");
$("li:even").css("color","#73ff73");
});
</script>
<ul> <li>テキスト1テキスト1テキスト1</li> <li>テキスト2テキスト2テキスト2</li> <li>テキスト3テキスト3テキスト3</li> <li>テキスト4テキスト4テキスト4</li> </ul>
偶数番目(0番目と2番目)のli要素が#73ff73の色に、
奇数番目(1番目と3番目)が#9cfの色に変わる。
odd/evenフィルターは、指定したセレクターで奇数(偶数)に登場する要素を選択できる。
jQueryではCSSセレクター以外にも、独自のセレクターである「フィルター」が利用できる。
セレクターの中から最初の要素を「firstフィルター」、最後の要素を「lastフィルター」で指定できる。
<script type="text/javascript">
$(function(){
$("li:first").css("color","#9cf");
$("li:last").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>
firstフィルターによって1番目のli要素が、lastフィルターによって最後のli要素が#9cfの色になる。
first-child擬似クラスやlast-child擬似クラスとの違いは、
first-child／last-child擬似クラスが共通の親要素を持つ要素から
最初（または最後の）の要素を選択するのに対して、
last／firstフィルターは指定したセレクターで最初（最後）に登場する要素だけを選択できる。
複数の属性セレクターを同時に指定することもできる。
<script type="text/javascript">
$(function(){
$("[title^='f'][title*='th']").css("color","#9cf");
});
</script>
<ul> <li title="first">テキスト1テキスト1テキスト1</li> <li title="second">テキスト2テキスト2テキスト2</li> <li title="third">テキスト3テキスト3テキスト3</li> <li title="fourth">テキスト4テキスト4テキスト4</li> </ul>
title属性の値が「f」から始まり、かつtitle属性の値に「th」が含まれる要素、
つまり４番目のli要素が#9cfの色になる。
