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

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

トピック：フォーカスがある要素（フォーム入力など）を表す 通常ユーザーが要素をクリックまたはタップしたり、キーボードの[Tab]キーを使用して要素を選択する場合

疑似クラス :focus

    情報：
  • :focus セレクタは、キーボードイベントや他のユーザ入力を受け付ける要素で使用できる

実例 コード 1

サンプル コードを試す
  • a:focus {
  •     background-color: yellow;
  • }

CSSコード：例

    input:focus{
       color: red;
    }
    /* フォーカスを持つ <input> 要素を選択 */
    使用上の注意：
  • メモ: この疑似クラスはフォーカスを持つ要素に対してのみ 適用される 。フォーカスを持つ要素を含む要素を選択したい場合は、:focus-within を使用して下さい 。

CSSコード：例

    a:link{
        color: blue; 
    }
    /* 未訪問リンク */
    a:visited{
        color: purple 
    }
    /* 訪問済みリンク */
    a:hover{
        background: yellow; 
    }
    /* ホバー時 */
    a:active{
        color: lime 
    }
    /* アクティブなリンク */
    使用上の注意：
  • この疑似クラスを完璧に動作させるには、正確な順序（LVHA 順）で定義しなければならない :link->:visited->:hover->:active->:focus

構文

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

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

PropertyDesktop 互換性
:focusChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯1フルサポート◯ありフルサポート◯1フルサポート◯8フルサポート◯7フルサポート◯1

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

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

Html

Glossary

PHP

JavaScript

JQuery

CSS