:nth-of-type() 疑似クラス CSS プロパティとは
トピック:特定のタイプの、その親のn番目の子であるすべての要素に一致することができる n には、数値、キーワード、または式を指定できる位置に基づいて、兄弟要素のグループで指定されたタイプの要素を選択する
疑似クラス セレクター :nth-of-type()
実例 コード 1
サンプル コードを試すp:nth-of-type(2) {
background: red;
}
CSSコード:例
p:nth-of-type(4n){
color: lime;
}
実例 コード 2
サンプル コードを試すp:nth-of-type(odd) {
background: red;
}
p:nth-of-type(even) {
background: blue;
}
構文
:nth-of-type(number) { css : properties ; }
疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
情報:nth-of-type 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| :nth-of-type() | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯3.5 | フルサポート◯9 | フルサポート◯9.5 | フルサポート◯3.1 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| :nth-of-type() | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯9.5 | フルサポート◯3.1 | 不明 |
|---|
::nth-of-type() 疑似クラス 関連記事
CSS :nth-of-type() 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef