記事の内容
擬似クラス・擬似要素とは？違いは？その使い方は！
擬似クラスとはどんなものか
指定した物全体に影響を与えるもので文書構造の範囲外にある情報や単体セレクタで表現できないものを選択するために導入されたものです。
擬似クラスにはどんなものがあるのか
- 動的擬似クラス・リンク擬似クラス、ユーザーアクション擬似クラス
- 言語擬似クラス
- ターゲット擬似クラス
- 構造擬似クラス
- 否定擬似クラス
- UI要素擬似クラス
動的擬似クラス・リンク擬似クラス、ユーザーアクション擬似クラス
動的擬似クラスは、要素の名前、属性、内容以外、一般に文書ツリーから導かない性質から要素を表す。
リンク擬似クラス
:link
未訪問のリンクを訪問済みのリンクと区別して表示するため、ａ、area、linkなどhref属性を持つ未訪問のすべての要素を表します。
注意点は:link擬似クラスによって定義されたスタイルは同等の仕様を持つリンク関連の擬似クラス(:active:hover:visited)によって上書きされます。
適切にリンクスタイルを適用するにはＬＶＨＡ順Ｌ(link)、Ｖ(visited)、Ｈ(hover)、Ａ(active)で定義して下さい。
他のリンク関連規則の前に「:link」を置くようにしましょう。
:visited
ユーザーがすでに訪問したリンクを表します、プライバシーの観点からこのセレクターを使用して変更できるスタイルは限定されます、詳しくは「ＭＤＮ Web docs」を参照した下さい。
適切にリンクスタイルを適用するにはＬＶＨＡ順Ｌ(link)、Ｖ(visited)、Ｈ(hover)、Ａ(active)で定義して下さい。
ユーザーアクション擬似クラス
行動に応じて描画を変更する
:active
ユーザーによってアクティブ化されている要素(ボタン)などを表します。
適切にリンクスタイルを適用するにはＬＶＨＡ順Ｌ(link)、Ｖ(visited)、Ｈ(hover)、Ａ(active)で定義して下さい。
:hover
ユーザーがカーソルを要素の上に置いた又は通過したときに変化する
適切にリンクスタイルを適用するにはＬＶＨＡ順Ｌ(link)、Ｖ(visited)、Ｈ(hover)、Ａ(active)で定義して下さい。
:focus
フォーカスを持っている要素を表します、要素をクリックやタップ、タブキーを選択した時
言語擬似クラス
:lang
要素がもつ言語情報から要素を表す
ターゲット擬似クラス
:target
文書のＵＲＬがフラグメント識別子を持つ場合、ターゲット要素を表す
構造擬似クラス
文書ツリー内の情報のうち、他の単体セレクタや結合子で表現できない要素を表す
:root
文書を表すつりーのルート要素を選択、HTMLでは<html>を表し、詳細度が高いことを除けばhtmlセレクターと同等です。
:nth-child()
兄弟要素のグループの中での位置に基づいて選択します。
(カッコ内に入れる数字・要素)
１ 一番最初の要素
２ｎ 偶数を表します
２ｎ＋１ 奇数を表します
４ｎ ３つおきに選択する
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
ラジオボタン・チェックボタン・オプションボタンなどのボタンの中の要素がチェックされていたりＯＮの状態にあることを表します。
擬似要素とは
見た目の違い コロンが二つ
擬似クラスと擬似要素を明確に区分するためにＣＳＳ３からコロンを擬似要素には二つ付けるようになりました。
擬似要素の一例
::before・::afteは元文書に存在しない内容を参照する方法を提供しています。
::before
要素の直前にコンテンツを追加
::after
要素の直後にコンテンツを追加
::first-line
要素の一行目を変更するときに使用します。
::first-letter
要素の一文字目を変更するときに使用します。
::selection
ユーザーが選択した文書の一部にスタイルを適用する
擬似クラス・擬似要素とは？違いは？使い方！
記述の要領
両方を使用する場合は擬似クラスを前に擬似要素を後ろに記述します。
