CSSの:nth-of-type(n)セレクターとは？基本的な使い方と実例を解説
CSSの :nth-of-type(n) セレクターは、同じ親要素内で「同じ種類の要素」の中から n 番目に該当する要素を選択してスタイルを適用するための擬似クラスです。たとえば、親要素の中にある複数の <p> 要素から、2番目の <p> 要素だけを指定したい場合などに活用できます。
基本構文
要素:nth-of-type(n) {
/* 適用するスタイル */
}
以下のコードでは、親要素内の2番目の <p> 要素に対して背景色を黄色に設定しています。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2) {
background: yellow;
}
</style>
</head>
<body>
<p>これはデモテキスト1です。</p>
<p>これはデモテキスト2です。</p>
<p>これはデモテキスト3です。</p>
<p>これはデモテキスト4です。</p>
</body>
</html>
この例では、「これはデモテキスト2です。」という段落だけが黄色い背景で表示されます。:nth-of-type(2) は、親要素内にある p 型の要素を上から数えて2番目のものだけを対象とするためです。
:nth-child(n) との違い
:nth-of-type(n) とよく似たセレクターに :nth-child(n) がありますが、両者には重要な違いがあります。
- :nth-child(n) … 親要素内のすべての子要素を対象に、種類を問わず n 番目の要素を選択します。
- :nth-of-type(n) … 指定した要素と同じタグ名を持つ要素のみを数えて、その中の n 番目を選択します。
たとえば、<div> と <p> が混在する親要素の場合、:nth-child(2) は2番目の子要素が <p> でなければ適用されませんが、:nth-of-type(2) なら <p> 同士で数えて2番目の段落が確実に選択されます。
応用：odd・even・数式による指定
:nth-of-type() には、単純な数字以外にもさまざまな指定方法があり、表やリストのストライプ模様などを作る際に非常に便利です。
/* 偶数番目の段落 */
p:nth-of-type(even) {
background: #f0f0f0;
}
/* 奇数番目の段落 */
p:nth-of-type(odd) {
background: #ffffff;
}
/* 3番目ごとの段落 */
p:nth-of-type(3n) {
color: red;
}
/* 2番目から2つおき（2, 4, 6...） */
p:nth-of-type(2n+2) {
font-weight: bold;
}
このように :nth-of-type(n) を使いこなすことで、HTMLに余計なクラスを追加することなく、要素の順序に応じた柔軟なスタイリングが可能になります。
-
CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法
CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*
-
CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説
CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white