jQuery firstや:nth-child系の一覧

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

とても役に立つJqueryさん。
今日は「nth-child」系のマトメです。

動作確認用デモ

    MENU

  • :first
  • :last
  • :even
  • :eq(2)
  • :nth-child(2)
  • :nth-child(2n)

    <ul>

  • <li>list-1</li>
  • <li>list-2</li>
  • <li>list-3</li>
  • <li>list-4</li>
  • <li>list-5</li>
  • <li>list-6</li>
  • </ul>

    <ul>

  • <li>list-1</li>
  • <li>list-2</li>
  • <li>list-3</li>
  • <li>list-4</li>
  • <li>list-5</li>
  • <li>list-6</li>
  • </ul>


 

FIRST


<script>
$("ul li:first").css({"font-size":"10px"});
</script>

li最初の要素の変更

LAST


<script>
$("ul li:last").css({"font-size":"10px"});
</script>

li最後の要素の変更

EVEN


<script>
$("ul li:even").css({"font-size":"10px"});
</script>

li偶数番目の要素の変更

ODD


<script>
$("ul li:odd").css({"font-size":"10px"});
</script>

li奇数番目の要素の変更

EQ(?)


<script>
$("ul li:eq(2)").css({"font-size":"10px"});
</script>

li3番目の要素の変更

:nth-child(?)


<script>
$("ul li:nth-child(2)").css({"font-size":"10px"});
</script>

各親要素、ここではulのli2番目を変更

nth-child(?n)


<script>
$("ul li:nth-child(2n)").css({"font-size":"10px"});
</script>

各親要素、ここではulのli2n番目の変更