リンク疑似クラス
要素名:link 未訪問のリンク
要素名:visited 訪問済のリンク
ダイナミック疑似クラス
要素名:hover カーソルが乗っている要素
要素名:active PCではマウスの左ボタン、タッチデバイスでは画面を押し込んでいる状態
要素名:focus タブキーを使ってリンクエリアにフォーカスしている状態
疑似要素
要素名:after 直前にテキストや画像を挿入
要素名:before 直後にテキストや画像を挿入
条件を表す疑似クラス
:nth-of-type(n)
同じ要素を数えていく。n番目の要素 nにodd(奇数)、even(偶数)などの指定もできる
3nとすることで3の倍数
:nth-last-of-type(n) 最後からn番目の要素
p:nth-of-type(2){color:red;} 2番目のp要素が赤色になる
:nth-child(n)
親要素内の兄弟関係の要素すべてをカウント
<div>
<div>div要素</div>
<p>一つ目のp要素</p>
<p>二つ目のp要素</p>
<p>三つ目のp要素</p>
</div>
p:nth-child(3){
color: red;
}
この場合、親要素のdivの中の子要素3番目を赤文字に変更
1番目はdiv
2番目は1つ目のp
3番目は2つ目のpとなり、この文字が変わる。
:target疑似クラス
ページ内アンカーなどで「ターゲット」とされた要素
ターゲットになった瞬間に適用される
p:target{
background:red:
}
コメント