[CSS] 疑似クラス一覧

2019年4月29日

疑似クラスを使うと、CSSを適用させる対象を柔軟に指定することができます。

主要疑似クラス一覧

主要な疑似クラス一覧です。

疑似クラス説明使用箇所
:link未訪問リンクのスタイルaタグ
:visited訪問済みリンクのスタイルaタグ
:hoverリンクにカーソルが乗っている時のスタイルタグ全般
:activeリンクをクリック中の時のスタイルタグ全般
:first-child先頭行のみスタイルを指定するtrタグ、liタグなど
:last-child最終行のみスタイルを指定するtrタグ、liタグなど
:nth-child(n)n番目の行のみスタイルを指定するtrタグ、liタグなど
:nth-child(odd)奇数行のみスタイルを指定するtrタグ、liタグなど
:nth-child(even)偶数行のみスタイルを指定するtrタグ、liタグなど
:nth-of-type(n)n番目の要素のみスタイルを指定するtdタグなど

備考

  • 疑似クラスは、テーブルの列単位にCSSを定義したい場合や、リンクの状態により適用させるCSSを変更したい場合などに使用します。

スポンサーリンク

CSS, 資料記事

Posted by tora