13
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSS 擬似要素『nth-child』と『nth-of-type』何が違うの?

Last updated at Posted at 2022-01-15

概要

複数の要素を並べる時によく、
「3番目の要素だけ指定してデザインをあてたい」や
「奇数・偶数番目の要素だけ指定してデザインをあてたい」などがよくある。

その度Google先生に聞いてみると、:nth-of-type( ):nth-child( )と出てくるが、
どっちもn番目の要素を指定することができるので、正直混乱する。

そのため、この記事では、:nth-of-type( ):nth-child( )の違いの解説と、
n番目、nの倍数番目などどんな指定でも使いこなせるようにサンプルの解説を行います。

結論

:nth-of-type( ) と :nth-child( )の違いは、要素の数え方です。

:nth-child()の場合

:nth-child()は、同じ親要素にある兄弟関係の全ての要素の中で何番目になるのかを指定するものになります。
つまりこんな感じになります。

<!--タグに指定する p:nth-child() -->
<div>
    <p>1番目</p>
    <a>2番目</a> 
    <p>3番目</p>
    <p>4番目</p>
</div>

p:nth-child()では、 pタグに指定しているので、2番目のaタグにはスタイルがあたりません。

<!--classに指定する .style:nth-child() -->
<div>
    <p>1番目</p>
    <a>2番目</a>
    <p class="style">3番目</p>
    <p class="style">4番目</p>
</div>

.style:nth-child()で .styleに指定しているので、1番目、2番目の.styleが指定されていない要素にはスタイルがあたりません。

:nth-of-type() の場合

:nth-of-type()は、同じ親要素にある兄弟関係の指定した要素の中で何番目になるのかを指定するものになります。
つまりこんな感じになります。

<!--タグに指定する p:nth-of-type() -->
<div>
    <p>1番目</p>
    <a>    </a>
    <p>2番目</p>
    <p>3番目</p>
</div>

aタグは、順番には入りません。

<!--classに指定する p.style:nth-of-type() -->
<div>
    <p>1番目</p>
    <a>    </a>
    <p class="style">2番目</p>
    <p class="style">3番目</p>
</div>

nth-of-type()は、class要素には対応していないので、.styleが指定されているpタグが数えられます。

nth-of-typenth-child を使いこなす

最初を指定する

:first-child :first-of-type

p:first-child {
  /*スタイルが入る*/
}

p:first-of-type {
  /*スタイルが入る*/
}

最後を指定する

:last-child :last-of-type

p:last-child {
  /*スタイルが入る*/
}

p:last-of-type {
  /*スタイルが入る*/
}

最初からx番目を指定する

:nth-child(x) :nth-of-type(x)

/*3番目の要素を指定する*/
p:nth-child(3) {
  /*スタイルが入る*/
}

p:nth-of-type(3) {
  /*スタイルが入る*/
}

最後からx番目を指定する

:nth-last-child(x) :nth-last-of-type(x)

/*3番目の要素を指定する*/
p:nth-last-child(3) {
  /*スタイルが入る*/
}

p:nth-last-of-type(3) {
  /*スタイルが入る*/
}

x番目から最後までを指定する

:nth-child(n+x) :nth-of-type(n+x)

/*3番目からの要素を指定する*/
p:nth-child(n+3) {
  /*スタイルが入る*/
}

p:nth-of-type(n+3) {
  /*スタイルが入る*/
}

最後からx番目までを指定する

:nth-child(-n+x) :nth-of-type(-n+x)

/*3番目までの要素を指定する*/
p:nth-child(-n+3) {
  /*スタイルが入る*/
}

p:nth-of-type(-n+3) {
  /*スタイルが入る*/
}

最後のx番目から最後までを指定する

:nth-last-child(n+x) :nth-last-of-type(n+x)

/*3番目からの要素を指定する*/
p:nth-last-child(n+3) {
  /*スタイルが入る*/
}

p:nth-last-of-type(n+3) {
  /*スタイルが入る*/
}

最初から最後のx番目までを指定する

:nth-last-child(-n+x) :nth-last-of-type(-n+x)

/*3番目までの要素を指定する*/
p:nth-last-child(-n+3) {
  /*スタイルが入る*/
}

p:nth-last-of-type(-n+3) {
  /*スタイルが入る*/
}

xの倍数番目

:nth-child(xn) :nth-of-type(xn)

/*3の倍数番目からの要素を指定する*/
p:nth-child(3n) {
  /*スタイルが入る*/
}

p:nth-of-type(3n) {
  /*スタイルが入る*/
}

xの倍数番目のy個となり

:nth-child(xn+y) :nth-of-type(xn+y)

/*3の倍数番目から2個となりの要素を指定する*/
p:nth-child(3n+2) {
  /*スタイルが入る*/
}

p:nth-of-type(3n+2) {
  /*スタイルが入る*/
}

兄弟要素が自分1個だけを指定する

:only-child :only-of-type

p:only-child {
  /*スタイルが入る*/
}

p:only-of-type {
  /*スタイルが入る*/
}

最後まで読んでくださってありがとうございます!

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします!

13
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?