TIL

Today I Learned. 知ったこと、学んだことを書いていく

リンクの状態によって、スタイルを変える

例えば、「カーソルが当たっているときにテキストの色を変える」とか

a:hover {
    color: green;
}

aタグ全てにスタイルを設定する場合(擬似クラスを設定していなくても適用したいスタイル)

a {
    color: blue;
}

擬似クラス

擬似クラス:a:hoverhoverの部分のこと

aタグでのリンクの状態によって表示を変えることができる擬似クラスの例

擬似クラス 説明
link aタグでhref属性が設定されている場合に適用される
visited リンク先に訪問済の場合に適用される
hover マウスカーソルがリンクに重なっているときに適用される
active リンクをクリックされた瞬間に適用される

CSSに記述するときには上の順番で記述しないとうまく適用されないらしい!

試してみた結果、たしかに、この順番じゃないといけないっぽい!!

linkとvisitedについて

linkとvisitedは使わない!

linkについて、基本的にaタグにはhref属性は設定されているため、つけなくていい!(aタグに対してスタイルを設定する感じ)

visitedを使うと、カラフルになってしまうとデザイン的に良くないため、使われないことが多いらしい

参考文献