linkとは
- ここで説明するlink とは次の語句からなるCSSの疑似クラスです。
- link
- 読み: リンク
意味: 連結する、つなぐ
:link疑似クラスの概要
この疑似クラスはセレクタに該当する要素が未訪問のリンクの場合に適用され一時的なプロパティ値の変更を行います。
このlinkとは逆に、訪問済みのリンクを検知する場合は :visited を使います。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:link{プロパティ名: 設定値;}
:link{プロパティ名: 設定値;}
実機サンプルとサンプルコード
ここからは実際の a要素 にプロパティを適用させて結果を見ていきたいと思います。
参考: 未訪問のリンクを検知する
ここでは2つのリンクをサンプルとしました。 このサイトのトップページから訪れた方はトップページのリンクは既にグレーの色になっているはずです。 まだリンクの色が変化していなければクリックするとこのリンクの色が変更されるはずです。
a{
border-top-left-radius: 30px 100%;
padding-left: 10px;
text-decoration: underline;
}
a:link{
color: ##dodgerblue;
border-left: 20px solid ##dodgerblue;
}
a:visited{
color: ##gray;
border-left: 20px solid ##gray;
}