【CSS】a要素の指定と疑似クラスlinkとの関係を解説
a要素を使うと、他ページに移動できるリンクを作成することができますね。
このリンクの色が訪問前と訪問後で変化しているのを見たことはないでしょうか？
疑似クラスのlinkを使えば、未訪問のリンクにスタイルを指定することができます。
今回は、a要素とCSS疑似クラスのlinkについて紹介します。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
疑似クラスlinkについて
まずは、a要素にスタイル指定する方法を紹介します。
<a href="#">他のページへ</a>a {
color: red;
}aタグで囲われた部分の文字が赤くなります。基本的な指定ですね。
これに疑似クラスlinkを足すと、未訪問リンクのスタイルを指定できます。
a:link{
color: green;
}この指定は、他の疑似クラスである「:visited」、「:hover」、 「:active」によって上書きされます。
- visited：訪問済みのリンク
- hover：マウスカーソルが乗った状態
- active：要素をクリックしてから離すまでの間
これらすべてを指定したい場合は、link、visited、hover、activeの順に記述する必要があります。
順番を変えてしまうと、機能しなくなるので注意しましょう。
まとめ：疑似クラスlinkを使いこなそう
今回は、a要素に疑似クラスlinkを指定すると、未訪問リンクのスタイル変更ができることを解説してきました。
疑似クラスの記述は順番が重要になる場面もあるということでしたね。
今回の記事が参考になれば幸いです
