CSSで要素を選択する
2024-10-05
CSSでN番目の要素を選択する
CSSでは、特定の要素のN番目を選択するために、:nth-child()セレクタを使用します。
:nth-child()セレクタの構文
selector:nth-child(n)
- n
選択する要素のインデックスです。 - selector
選択したい要素のセレクタです。
具体的な例
すべての偶数番目の要素を選択
p:nth-child(even) {
color: red;
}
これは、すべての段落要素のうち、偶数番目のものを赤色にします。
3番目の要素を選択
li:nth-child(3) {
font-weight: bold;
}
div:nth-child(3n) {
background-color: yellow;
}
これは、すべてのディビジョン要素のうち、3の倍数番目のものを黄色い背景色にします。
他の関連セレクタ
- :nth-last-of-type()
末尾から数えて特定の要素タイプのN番目の要素を選択します。 - :nth-last-child()
末尾から数えてN番目の要素を選択します。
CSSで要素を選択する例
すべての偶数番目の段落要素を赤色にする
p:nth-child(even) {
color: red;
}
- color: red;
選択された要素のテキスト色を赤色にします。 - :nth-child(even)
すべての段落要素のうち、偶数番目のものを選択します。
3番目のリスト要素を太字にする
li:nth-child(3) {
font-weight: bold;
}
- font-weight: bold;
選択された要素のフォントを太字にします。
3の倍数番目のディビジョン要素を黄色い背景色にする
div:nth-child(3n) {
background-color: yellow;
}
- background-color: yellow;
選択された要素の背景色を黄色にします。
最後のリスト要素を青色にする
li:nth-last-child(1) {
color: blue;
}
2番目の段落要素を緑色にする
p:nth-of-type(2) {
color: green;
}
JavaScriptを使用する
JavaScriptを使用して、CSSのセレクタとDOM操作を組み合わせることで、要素を選択し、スタイルを適用することができます。
例
const elements = document.querySelectorAll('p:nth-child(even)');
elements.forEach(element => {
element.style.color = 'red';
});
このコードは、すべての偶数番目の段落要素を選択し、赤色にします。
CSSのカスタムプロパティを使用する
CSSのカスタムプロパティ（変数）を使用して、スタイルを動的に変更することができます。
:root {
--nth-child: 3;
}
p:nth-child(var(--nth-child)) {
font-weight: bold;
}
このコードは、--nth-childのカスタムプロパティを使用して、3番目の段落要素を太字にします。プロパティの値を変更することで、異なる要素を選択することができます。
CSSのメディアクエリを使用する
メディアクエリを使用して、異なる画面サイズやデバイスに合わせてスタイルを調整することができます。
@media (min-width: 768px) {
p:nth-child(even) {
color: red;
}
}
このコードは、画面幅が768ピクセル以上の場合に、すべての偶数番目の段落要素を赤色にします。
css css-selectors
