:first-of-typeは1つ目の要素にスタイルシートを適用するCSS3のセレクタです。直近の親要素の中で、1つ目かどうかの判別が行えます。
サンプルAの場合、セレクタを「nav ul li:first-of-type」と指定すると、<nav>の中の<ul>の中の1つ目の<li>に設定すると適用することができます。さらに、設定を適用するためには、セレクタを「nav ul li:first-of-type a:hover」と指定します。
<!-- メニュー --> <nav> <ul> <li><a href="index.html">トップ</a></li> <li><a href="about.html">森の工房について</a></li> <li><a href="event.html">季節のイベント</a></li> <li><a href="contact.html">お問い合わせ</a></li> <li><a href="http://blog.xxx.xxx/">ブログ</a></li> </ul> </nav>
サンプルAのナビゲーションのメニューのマークアップ。
セレクタを「li:first-of-type」の代わりに「li:nth-of-type(1)」と指定することでも、1つ目の<li>にスタイルシートを適用することができます。