jQueryのセレクタを利用してスタイルシートの制御の事を書いていきたいと思います。今回はリストタグの番号の色を上から徐々に薄くしていく方法を取り扱います。
jquery_selector_001

リスト項目[ol]タグの番号の色を徐々に薄く変化させます。
htmlを以下のように記述します。

<nav class="test_list_001">
 <ol>
  <li><a href="#">jQueryの基礎-000</a></li>
  <li><a href="#">jQueryの基礎-001</a></li>
  <li><a href="#">jQueryの基礎-002</a></li>
  <li><a href="#">jQueryの基礎-003</a></li>
  <li><a href="#">jQueryの基礎-004</a></li>
  <li><a href="#">jQueryの基礎-005</a></li>
  <li><a href="#">jQueryの基礎-006</a></li>
 </ol>
</nav>

まずはライブラリの読み込みと、スタイルシートの制御する構文を書いた外部jsファイルをhead内にて読み込みます。

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/selector.js"></script>

基本の構文の書き方

jQuery(function(){
 スクリプトを記述
});

基本の構文の中に入れるスタイルシートを制御するスクリプトの書き方

jQuery(“セレクタ”).css({“プロバティ”});

セレクタはスタイルシートのセレクタと対応しているので、同様に書く事ができます。

jQuery(“.test_list_001 ol li”).css({“プロバティ”});

上記の例のli要素に適応させたい場合はこの様に書く事ができます。

[x]番目の要素を指定する
jQueryには、[x]番目の要素を指定するフィルターがあります。
フィルターはセレクタの後に:フィルタ名で利用できます。

.test_list_001 ol li:eq(x)

[x]番目指定フィルターは:eq(x)はこの様に書く事ができます。
xは0から数えます。

では、li要素に文字色の設定をします。
記述の場所はselector.jsファイルに書いています。

jQuery(function(){
 jQuery(".test_list_001 ol li").css({"color":"#F6C"});
 jQuery(".test_list_001 ol li:eq(0)").css({"color":"#F09"});
 jQuery(".test_list_001 ol li:eq(1)").css({"color":"#F3B"});
 jQuery(".test_list_001 ol li:eq(2)").css({"color":"#F5B"});
});

初めの要素に濃いピンクを2~3番目に行くにつれて色を薄めてみました。今回は1~3番目までしか設定していませんが、もっと多くの設定を記述することも可能です。

最後にスタイルシートの設定を書いておきます。

.test_list_001 ol { list-style: decimal-leading-zero inside; }
.test_list_001 ol li { font-size:18px; line-height:24px; letter-spacing:0.03em; font-weight:bold; }
.test_list_001 ol li a { font-size:12px; line-height:24px; letter-spacing:0.03em; font-weight:normal; }

今回は番号を特に目立たせたいので、スタイルシートを使って番号を大きくそれ以外は小さめに整形してみました。