【CSS】nth-of-typeセレクターを使って要素を選択する方法

:nth-of-type セレクターは、特定の要素を選択してスタイルを適用するための便利な方法です。

基本的な使い方：CSS

要素名:nth-of-type(位置) {
    スタイルのプロパティ: 値;
}

●要素名 は選択したい要素の名前です。例えば、div や p などのHTML要素を指定できます。
●位置 は選択したい要素の位置を指定します。この位置は整数を使って表現され、1から始まります。例えば、3 は3番目の要素を意味します。

例: 奇数番目の段落をスタイル化する

p:nth-of-type(odd) {
    background-color: #f2f2f2 ;
}

上記のコードは、奇数番目の段落要素に灰色の背景色を適用します。奇数番目の段落要素は、1つおきに選択されます。

例: 特定の位置にある要素を選択する

ul li:nth-of-type(3) {
    font-weight: bold;
    color: blue;
}

このコードは、リスト内の3番目の項目に太字と青のテキスト色を適用します。

例: リストの4番目以降の項目を非表示にする

ul li:nth-of-type(n + 4) {
    display: none;
}

リスト内の4番目以降の項目を非表示にします。つまり、最初から3番目までの項目は表示され、4番目以降の項目は非表示になります。

具体的に、:nth-of-type(n + 4) の意味は次のとおりです⇩

• n は整数の変数です。この変数は、要素の順序（位置）を表します。

• + は足し算を示し、指定した位置からの要素を選択します。

• 4 は開始位置を示します。この場合、4番目の要素から選択が始まります。

したがって、:nth-of-type(n + 4) は、指定した位置（ここでは4番目）以降の要素を選択するためのセレクターです。例えば、1、2、3番目の要素はこのセレクターには一致しませんが、4番目以降の要素が一致します。