【なんでも研究日誌】CSSセレクタ

iDempiere/JPiereのデザインをメンテナンスしていくのにCSSセレクタについて整理しておく必要があるのでメモしておきます。

CSSセレクタとは

CSSセレクタとは、CSSの適用範囲を示す部分の事です。以下の種類があります。

ユニバーサルセレクタ

セレクタとして＊(アスタリスク)を指定すると、そのCSSは全ての要素に適用されます。

タイプセレクタ

セレクタとして、HTMLのタグをそのまま適用範囲とする事ができます。

IDセレクタ

"#(シャープ)"に続けてHTMLタグのID属性の値を使用して、CSSの適用範囲を指定する事ができます。

クラスセレクタ

".(ピリオド)"に続けてHTMLタグのclass属性の値を使用して、CSSの適用範囲を指定する事ができます。

属性セレクタ

"[]"を使用して、属性の値を使用して、CSSの適用範囲を指定する事ができます。

◆:[属性名]

◆:[属性名="値全体"]

◆:[属性名~="空白区切りで設定されている値の１つ"]

◆:[属性名|="ハイフン区切りの値の前半"]　

◆:[属性名^="属性値の前方一致"]

◆:[属性名$="属性値の後方一致"]

◆:[属性名*="属性値の部分一致"]

疑似クラスとは

疑似クラスを使用すると、ある要素が特定の"状態"の時にCSSの適用対象とする事ができます。

リンク関連の疑似クラス

◆:link

◆:visited

◆:hover

◆:active

構造疑似クラス

◆:nth-child(式)

◆:nth-last-child(式)

◆:nth-of-type(式)

◆:nth-last-of-type(式)

◆:first-child

◆:first-of-type

◆:last-child

◆:last-of-type

◆:only-child

◆:only-of-type

◆:empty

◆:root

その他の疑似クラス

◆:focus

◆:enabled

◆:disabled

◆:checked

◆:target

◆:lang

◆:not

疑似要素とは

疑似要素を使用すると、要素でない部分(タグ付けされていない部分)にCSSを適用する事ができます。

::first-letter

指定した要素の1文字目にCSSを適用する事ができます。

::first-line

指定した要素の1行目にCSSを適用する事ができます。

::before

指定した要素の直前にCSSを適用する事ができます。

::after

指定した要素の直後にCSSを適用する事ができます。

セレクタの結合子

セレクタA セレクタB

セレクタAとセレクタBの間は半角スペース。セレクタAの要素に含まれるセレクタBに対してCSSを適用する事ができます。

セレクタA > セレクタB

セレクタAの子要素であるセレクタBに対してCSSを適用する事ができます。セレクタBが孫要素以下の場合は適用されません。

セレクタA + セレクタB

セレクタAの直後にある(隣接している)セレクタBに対してだけCSSを適用する事ができます。

セレクタA ~ セレクタB

セレクタAよりも後にあるセレクタBに対してCSSを適用する事ができます。

セレクタの組み合わせ方