nth-childについてわかりやすく説明してみた HTML,CSS復習20

この記事でわかること

 

nth-childを使って行数によって設定を変える方法が絶対わかる

みなさん、こんにちは。
今回は難しい言葉を使わずにnth-childを説明していきます。

行数によって色々設定を変えるには

nth-child();

を使います。

簡単に言うと

nth-child(1)で一番目

nth-child(2)で二番目

nth-child(3)で三番目ということです。

それだけのことです。

例えば

p.nth-child(1);{
text-align:center;
}

ならpタグの一番目が中央寄せになります。

また奇数、偶数行でわけることもできます。

奇数行の場合はnth-child(2n+1);

偶数行の場合はnth-child(2n);

で設定します。

例えば

td: nth-child(2n);{
background-color: skyblue;
}   

なら

tdタグの偶数番目の背景色がskyblueになります。

疑似クラスとか引数とは配列とか難しい言葉で頭が混乱してた方はこれですっきりわかったのではないでしょうか。

ただしnth-childはクラスの中で一番目、二番目とはできない仕様なので注意しましょう。

あくまでそのページ内で何番目に使ってるタグかというのが重要です。