CSS :nth-of-type() 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

: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;
    }

    /* 兄弟の <p> 要素の中で 3つおきに選択 */

実例 コード 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つ取ります。
CSS バージョンCSS 3

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
:nth-of-type()ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯ありフルサポート◯3.5フルサポート◯9フルサポート◯9.5フルサポート◯3.1

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
:nth-of-type()AndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯2.1 不明フルサポート◯ありフルサポート◯4フルサポート◯9.5フルサポート◯3.1 不明
:nth-of-type() 疑似クラス 関連記事
CSS :nth-of-type() 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS :nth-of-type() 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS