:nth-child() 疑似クラス CSS プロパティとは
トピック：:nth-child(n)セレクタは、そのタイプの親に関係なく、n 番目の子であるすべての要素にマッチ(選択)する、ことができる n には、数値、キーワード、または式を指定できる 兄弟要素のグループの中での位置に基づいて選択する
疑似クラス セレクター :nth-child()
実例 コード 1
サンプル コードを試すp:nth-child(2) {
background: red;
}
CSSコード：例
:nth-child(4n){
color: lime;
}
構文
:nth-child(number) { css : properties ; }
疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
nth-child 擬似クラスは、要素を選択するパターンを表す1つの引数をとります。
キーワード値
実例 コード 2
サンプル コードを試すp:nth-child(odd) {
background: red;
}
p:nth-child(even) {
background: blue;
}
情報：odd一連の兄弟要素の中で奇数番目の要素(1, 3, 5) などを表示 する。 ことができる。even一連の兄弟要素の中で偶数番目の要素(2, 4, 6) などを表示 する。 ことができる。
関数表記
実例 コード 3
サンプル コードを試すp:nth-child(3n+0) {
background: red;
}
情報：<An+B>一連の兄弟要素のうちnに正の整数または0を入力すると、An+B のパターンと一致する位置の要素が表示されます。 最初の要素の数は番号は1です AとB の両方の値 <integer>
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| :nth-child() | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯3.5 | フルサポート◯9 | フルサポート◯9.5 | フルサポート◯3.1 |
|---|
<selector> | サポートなし✖ | 不明 | サポートなし✖ | 不明 | 不明 | フルサポート◯9 |
|---|
| 親なしの要素と一致 | フルサポート◯57 | 不明 | フルサポート◯52 | 不明 | フルサポート◯44 | 不明 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| :nth-child() | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯4 | フルサポート◯9.5 | フルサポート◯3.1 | フルサポート◯あり |
|---|
<selector> | 不明 | 不明 | 不明 | サポートなし✖ | 不明 | フルサポート◯9 | サポートなし✖ |
|---|
| 親なしの要素と一致 | フルサポート◯57 | フルサポート◯57 | 不明 | フルサポート◯52 | フルサポート◯44 | 不明 | フルサポート◯7.0 |
|---|
CSS :nth-child() 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef