◯番目の要素にだけクラスを効かせたい、という時が多々あります。そんな時に便利な「:nth-child()」と「:nth-of-type()」のクラス使用方法と、実用例をまとめました。:first-child要素の最初にだけ指示が出せます。:first-childは、同じ要素で構成される場合にのみ使用できるというルールがあります。例としては<li>要素でよく使用されています。具体的には、ぺージネーションを作成する時にとても役に立ちます。CodePen.darkでは、上記のようなページネーションを作成してみます。数字の前後にはボーダーを入れるデザインにしました。1番始めの<li>に指示を出し、右にボーダーを付けました。#3e3a39;という指示を設定しました。「次の10件」も同じく、間にボーダーを入れるべく、こちらにはli:last-childにして、スタイルを追加しました。Awesomeで三角アイコンを入れましたが、こちらも疑似クラスが活躍しています。<span>を付け、cssでli:first-childの<i>を指示し、それぞれのmarginを設定しています。「次の10件」には、:last-childで指示しています。htmlは以下のようになります。:first-childは、同じ要素で構成される場合にのみ使用できるというルールがあります。他要素が混合する場合の、◯番目の要素にだけ指示を出す方法をやってみます。<p>まず初めにペンギンたちの群れが迎えてくれます。<p>要素の前に<h1>が入っているところに注目します。この場合に、:first-childを使用しても、適用されません。いうわけで、ここで登場するのが:first-of-typeです。CodePen.darkこのように、<h1>を無視して、<p>の中から1番目に指定が効きます。最後の要素にだけスタイルを適用する。background-color:#d6efec;}最後の要素にだけ指定したい時に使用します。上記のページネーションでも登場しました。◯番目の要素にだけスタイルを適用する。background-color:#d6efec;}これもよく使うかな、と思います。奇数の要素にだけスタイルを適用する。背景色を交互に入れ替えたい、ということがありますが、そういった時に使えます。CodePen.darkこんな感じの表で、表自体がもっと長い時に使用すると、見やすい表になるかと思います。偶数の要素にだけスタイルを適用する。background-color:#d6efec;}奇数があれば偶数の設定もありますよね。まとめonly-childと:only-of-typeに関してはあまり使わないかな、と思うので割愛します...。何かいい使い所を見つけたら追記します。その辺りを理解して使用していきたいですね。FormAboutこのブログは自分用の備忘録として作成しました。コーディングを行う際に使えるスニペットや、デザインやフォントのブックマーク等を更新していく予定です。logequal-note。