CSSの疑似クラス「:nth-child(n)」の書き方のパターン

11月の終わりがあと残り数日…

本格的な寒さになってきましたね。

でも、昼間はちょっと暑さを感じたり寒さを感じてますが、ニュースを見ると北部のほうではもう雪とか始めてるそうですね。

寒さが続く中、インフルエンザも蔓延してるみたいなんですが…

感染しないように気を付けてください。

さてと、話題を取り戻して…

CSSの疑似クラス「:nth-child(n)」の書き方のパターン

Webデザインの忘備録として書き込みます。

:nth-childの書き方のパターンの種類があります。

一番最初だけ限定とした書き方をするなら「:first-child」を書きます。

または、「:nth-child(1)」と書きますが、プロのデザイナーとしてはほとんど書く人は全く見かけません。

プロが作ったWebサイトの中身のコーディングを見るとほとんど90%は「:first-child」を書く人が多いですね。

2番目限定とか、3番目限定とした書き方をするのであれば「:nth-child(n)」を記述します。

(n)の中に何番目だけ限定とした表示を書くことができます。

偶数だけ表示をしたいときは「:nth-child(even)」を書き、奇数だけ表示をしたいときは「:nth-child(odd)」を書きます。

使い方の意味は分かりましたでしょうか?

では、また!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください