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

:target 疑似クラス CSS プロパティとは

トピック:アンカー名が付いたURLは、ドキュメント内の特定の要素にリンクする 事ができる リンク先の要素がターゲット要素 :targetセレクタは、現在アクティブなターゲット要素をスタイルするために使用できる

疑似クラス セレクター :target

実例 コード 1

サンプル コードを試す
     :target {
        border: 2px solid blue;
        background-color: lightgray;
    }

    /* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
    たとえば、次のURLには、abcという要素を指すフラグメンテーション(#記号)があります
    http://www.example.com/index.html#abc

    現在の URL が上記の通りの場合、以下の要素が :target セレクターで選択される
    <p id="abc">Example</p>

実例 コード 2

サンプル コードを試す
    .webref div {
        display: none;
    }

    .webref div:target {
        display: block;
    }

    /*タブ付きメニューを作成*/

構文

:target { css : properties ; }
 疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
CSS バージョンCSS 3

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

PropertyDesktop 互換性
:targetChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯ありフルサポート◯1フルサポート◯9フルサポート◯9.5フルサポート◯1.3

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

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

Html

Glossary

PHP

JavaScript

JQuery

CSS