擬似クラス

  • :hoverカーソル下の要素
  • :focusフォーカスされた要素
  • :link未訪問リンク
  • :visited訪問済みリンク
  • :activeアクティブな要素

参考:

擬似クラス | MDN

使い方

参考:

CSS でリンクの色をクリック状態によって変える方法 | わーどしゅーぷれす

リンクの文字色を指定する | TAG index

hover

参考:

:hover 擬似クラス | HTML クイックリファレンス

:hover | MDN

focus

こちらのページを参照

参考:

フォームの input 要素を focus した時の枠の色を変える方法! | Qumeru マガジン

:focus 擬似クラス | HTML クイックリファレンス

:focus | MDN

focus-visible

参考:

2021年1月〜3月に各ブラウザで focus-visible 周りの動きがあったのでまとめた | sakito

:focus-visible | MDN

focus-visible Class Demo | WICG

The Focus-Indicated Pseudo-class: :focus-visible | Selectors Level 4

リポジトリ:

WICG/focus-visible: Polyfill for `:focus-visible` – GitHub

link / visited / active

参考:

:link 擬似クラス | HTML クイックリファレンス

:visited 擬似クラス | HTML クイックリファレンス

:active 擬似クラス | HTML クイックリファレンス

:link | MDN

:visited | MDN

:active | MDN

リンクの色

ブラウザデフォルト
Chrome Edge Safari Firefox
未訪問
:link
#0000ee #0066cb #4100f1 #0000ee
アクティブ
:active
#fe0000 なし #ff0000 #ee0000
訪問済み
:visited
#551b8c #81007f #63008c #551b8c

参考:

リンクのデフォルト色はブラウザに依存する | ノラトキの SiteStudio

Safari 5 および Chrome 6 における訪問済みリンクの識別 | Accessible & Usable

なぜテキストリンクは青色なのか? 意訳 | SHINOBU’s MEMO

クリックされやすいリンク色を極める! | はるなぴログ

主要サイトのテキストリンク色比較 | Naifix

リンク色 – Wikipedia

Why are Links Blue? | A List Apart

What’s default HTML/CSS link color? | Newbedev

What’s default HTML/CSS link color? – Stack Overflow

Reset link colour to browser default – Stack Overflow

ブラウザでリンクの色をカスタマイズする

参考:

Safari や Chrome で Google のリンク色をカスタマイズする方法 | Stocker.jp

スマホでタップ時のハイライト表示を変更する

-webkit-tap-highlight-color プロパティにハイライト表示の色を指定する。無効化する場合は透明色を指定する。

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}Code language: CSS (css)

参考:

iOS や Android でリンクタップ時のハイライト表示を変更する方法 | ウェブアンテナ

CSS3 によるタップした色を設定 | ShanaBrian Website

-webkit-tap-highlight-color | MDN

Remove Gray Highlight When Tapping Links in Mobile Safari | CSS-Tricks

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA