擬似クラス・擬似要素とは?違いは?その使い方は!

擬似クラスとはどんなものか

指定した物全体に影響を与えるもので文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入されたものです。

擬似クラスにはどんなものがあるのか

  • 動的擬似クラス・リンク擬似クラス、ユーザーアクション擬似クラス
  • 言語擬似クラス
  • ターゲット擬似クラス
  • 構造擬似クラス
  • 否定擬似クラス
  • UI要素擬似クラス

動的擬似クラス・リンク擬似クラス、ユーザーアクション擬似クラス

動的擬似クラスは、要素の名前、属性、内容以外、一般に文書ツリーから導かない性質から要素を表す。

リンク擬似クラス

:link

未訪問のリンクを訪問済みのリンクと区別して表示するため、a、area、linkなどhref属性を持つ未訪問のすべての要素を表します。

注意点は:link擬似クラスによって定義されたスタイルは同等の仕様を持つリンク関連の擬似クラス(:active:hover:visited)によって上書きされます。

適切にリンクスタイルを適用するにはLVHA順L(link)、V(visited)、H(hover)、A(active)で定義して下さい。

他のリンク関連規則の前に「:link」を置くようにしましょう。

:visited

ユーザーがすでに訪問したリンクを表します、プライバシーの観点からこのセレクターを使用して変更できるスタイルは限定されます、詳しくは「MDN Web docs」を参照した下さい。

適切にリンクスタイルを適用するにはLVHA順L(link)、V(visited)、H(hover)、A(active)で定義して下さい。

ユーザーアクション擬似クラス

行動に応じて描画を変更する

:active

ユーザーによってアクティブ化されている要素(ボタン)などを表します。

適切にリンクスタイルを適用するにはLVHA順L(link)、V(visited)、H(hover)、A(active)で定義して下さい。

:hover

ユーザーがカーソルを要素の上に置いた又は通過したときに変化する

適切にリンクスタイルを適用するにはLVHA順L(link)、V(visited)、H(hover)、A(active)で定義して下さい。

:focus

フォーカスを持っている要素を表します、要素をクリックやタップ、タブキーを選択した時

言語擬似クラス

:lang

要素がもつ言語情報から要素を表す

ターゲット擬似クラス

:target

文書のURLがフラグメント識別子を持つ場合、ターゲット要素を表す

構造擬似クラス

文書ツリー内の情報のうち、他の単体セレクタや結合子で表現できない要素を表す

:root

文書を表すつりーのルート要素を選択、HTMLでは<html>を表し、詳細度が高いことを除けばhtmlセレクターと同等です。

:nth-child()

兄弟要素のグループの中での位置に基づいて選択します。

(カッコ内に入れる数字・要素)

1 一番最初の要素
2n 偶数を表します
2n+1 奇数を表します
4n 3つおきに選択する
odd 兄弟要素の中で奇数番目の要素を選択します。
even 兄弟要素の中で偶数番目の要素を選択します。

:nth-last-child()

兄弟要素のグループの中での位置に基づいて選択、後ろから数えて選択します。

:nth-of-type()

兄弟要素の中で指定された形の要素を位置に基づいて選択します。

:nth-last-of-type()

兄弟要素の中で指定された要素を、最後から数えた位置に基づき選択します。

:first-child

兄弟要素の中で最初の要素を表します。

:last-child

兄弟要素の中で最後の要素を表します。

:first-of-type

兄弟要素のグループの中でその種類の最初の要素を表します。

:last-of-type

兄弟要素のグループに中でその種類の最後の要素を表します。

:only-child

兄弟要素がない要素を表します。

:only-of-type

同じ型の兄弟要素がない要素を表します。

:empty

子を持たない要素を表します、子の要素とはノード又は文字列(スペースを含む)です、コメントや処理支持は要素が殻であるかどうかの判断に影響しません。

否定擬似クラス

:not()

列挙されたセレクターに一致しない要素を表します、特定の項目が選択されることを防ぐため否定擬似クラスと呼ばれています。

UI要素状態擬似クラス

UI要素の状態によって要素を表す

:disabled

無効な要素を表します、無効な要素とはアクティブ化したりできない事を言います

:indeterminate

中間の状態にあるフォームの要素を表します。

:enabled

有効な要素を表します、有効な要素とはアクティブ化したりフォーカスを得たりすることができる状態

:checked

ラジオボタン・チェックボタン・オプションボタンなどのボタンの中の要素がチェックされていたりONの状態にあることを表します。

擬似要素とは

見た目の違い コロンが二つ

擬似クラスと擬似要素を明確に区分するためにCSS3からコロンを擬似要素には二つ付けるようになりました。

擬似要素の一例

::before・::afteは元文書に存在しない内容を参照する方法を提供しています。

::before

要素の直前にコンテンツを追加

::after

要素の直後にコンテンツを追加

::first-line

要素の一行目を変更するときに使用します。

::first-letter

要素の一文字目を変更するときに使用します。

::selection

ユーザーが選択した文書の一部にスタイルを適用する

擬似クラス・擬似要素とは?違いは?使い方!

記述の要領

両方を使用する場合は擬似クラスを前に擬似要素を後ろに記述します。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事