○番目の要素のスタイル指定

コーディングをしていると、最初の要素だけにこのスタイルをかけたい、２の倍数の要素に…という欲求が出てきます。

この記事では○番目の要素にスタイルをかけるCSSの設定方法を解説していきます。

○番目指定の一覧

まずはどんな手法があるのか、一覧をご覧ください。

書き方は次のようになります。

<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <li>4番目の要素</li>
  <li>5番目の要素</li>
<ul>

li:nth-child(2){
  color:blue;
}

-childと-of-typeの違い

○番目を指定するのには、:nth-childを使用する方法と:nth-of-typeを使用する方法があります。

二つあるということはその特性が違うということで、この違いについて解説していきます。

まずはデモをどうぞ。HTMLを以下のようにします。

<div>
  <h3>-childと-of-typeの違いのデモ</h3>
  <p>1つ目のp要素</p>
  <div>1つ目のdiv要素</div>
  <p>2つ目のp要素</p>
  <div>2つ目のdiv要素</div>
</div>

このHTMLにまずは-childで2番目のp要素を指定してみます。

div p:nth-child(2){
  color:blue;
}

予想通りになりましたでしょうか？

次に-of-typeを使って2番目 のp要素を指定してみます。

div p:nth-of-type(2){
  color:blue;
}

-of-typeを使用するとこのようになります。

上記の二つ明らかに違いますよね。それではそれぞれについて解説していきます。

E:nth-child ()

親要素内で○番目の子要素であるE要素に指定されます。

上記の例だと、div要素の2番目の子要素であるp要素は、「1つ目のp要素」になりますので、デモの通りとなります。

E:nth-of-type ()

親要素内で の子要素で○番目のE要素に指定されます。

同じく上記の例だと、div要素の2番目のp要素は、「2つ目のp要素」なのでデモのようになります。

意味を解らず「○番目の要素指定」とそれぞれを覚えていると、実際に使ったときに『なぜこれにこのスタイルがかかるんだ…』となりますので、違いをしっかり覚えましょう。

○番目の要素のスタイル指定まとめ

やり方は理解できましたでしょうか？このやり方を覚えると余計にクラス名やid名をhtmlに記載せずともスタイルの指定が容易になりますのでぜひ覚えましょう！