べる鈴木のプログラミング勉強日記

プログラマーを目指して勉強する30代独身の日記です。

擬似クラス

2020年3月29日

今日はCSSを勉強した、、、

■リンク擬似クラス

:link まだアクセスしたことがないリンクに対するスタイルを設定できる

:visited すでにアクセスしたリンクのスタイルを設定できる

■ユーザアクション疑似クラス

:hover マウスカーソルが重なったときのスタイルを設定

:active クリックしたときのスタイルを設定

:focus <input>などで入力欄を詮索しているときのスタイル

■構造擬似クラス

構造擬似クラスとは、リンク擬似クラスやユーザアクション疑似クラスなど、
HTML要素に対して疑似クラスを設定できるものらしいです。

classやidでは、それぞれ属性ごとにスタイルを設定していたが、
構造擬似クラスでは、表示順番などをもとにしたスタイルも設定できる。

:root ルート要素(html)に対してスタイルを設定

:first-child 最初に表示される要素に対してのみスタイルを適用

:last-child 最後に表示される要素に対してのみスタイルを適用

:first-of-type 最初に表示される要素に対してのみスタイルを適用(間に他のHTML要素があってもOK)

:last-of-type 最後に表示される要素に対してのみスタイルを適用(間に他のHTML要素があってもOK)

:empty 空白のHTML要素に対してスタイルを設定

とりあえず、ここまで