2012年09月
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になる。
