CSSセレクタチートシート 【CodePenでの例あり】

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【CSS】セレクタチートシート | コレワカ

CSSとは

Cascading Style Sheetsの略で、
ウェブページのスタイルを指定するためのマークアップ言語のこと。
HTMLなどで書かれた文書を色やフォントやレイアウトなどを変えることが可能。
CSSリファレンス | MDN

CSSセレクタとは

CSSを適用させたいHTML要素を指定するためのもの

基本の書き方

CSS

セレクタ{
  プロパティ: 値;
}

基本のセレクタ

ユニバーサルセレクタ (全称セレクタ) で指定

全ての要素にスタイルを適用

See the Pen CSS_* by engineerhikaru (@engineerhikaru) on CodePen.

タグ名で指定

指定したタグの要素にスタイルを適用

See the Pen CSS_tag by engineerhikaru (@engineerhikaru) on CodePen.

class名で指定

指定したclass名の要素にスタイルを適用

See the Pen CSS_class by engineerhikaru (@engineerhikaru) on CodePen.

id名で指定

指定したid名の要素にスタイルを適用

See the Pen CSS_id by engineerhikaru (@engineerhikaru) on CodePen.

複数要素の指定

指定した複数の要素にスタイルを適用

See the Pen CSS_multiple by engineerhikaru (@engineerhikaru) on CodePen.

子孫要素

指定したある要素の階層下の要素にスタイルを適用

See the Pen CSS_progeny by engineerhikaru (@engineerhikaru) on CodePen.

ある要素の直下の子要素

指定したある要素の直下の子要素にスタイルを適用

See the Pen CSS_below by engineerhikaru (@engineerhikaru) on CodePen.

ある要素の兄弟要素

指定したある要素の兄弟要素にスタイルを適用

See the Pen CSS_brother by engineerhikaru (@engineerhikaru) on CodePen.

ある要素の隣の要素

指定したある要素の隣の要素にスタイルを適用

See the Pen CSS_next by engineerhikaru (@engineerhikaru) on CodePen.

属性セレクタ

属性で指定

指定した属性に一致する要素にスタイルを適用

See the Pen CSS_attribute by engineerhikaru (@engineerhikaru) on CodePen.

属性で指定(完全一致)

指定した属性と属性名に完全一致する要素にスタイルを適用

See the Pen CSS_attribute-perfect by engineerhikaru (@engineerhikaru) on CodePen.

属性で指定(完全一致+α)

指定した属性と属性名に完全一致する要素(他に属性名があってもOK)にスタイルを適用

See the Pen CSS_attribute-perfectalpha by engineerhikaru (@engineerhikaru) on CodePen.

属性で指定(前方一致)

指定した属性と属性名に前方一致する要素にスタイルを適用

See the Pen CSS_attribute-forward by engineerhikaru (@engineerhikaru) on CodePen.

属性で指定(後方一致)

指定した属性と属性名に後方一致する要素にスタイルを適用

See the Pen CSS_attribute-backward by engineerhikaru (@engineerhikaru) on CodePen.

属性で指定(部分一致)

指定した属性と属性名に部分一致する要素にスタイルを適用

See the Pen CSS_attribute-part by engineerhikaru (@engineerhikaru) on CodePen.

擬似要素

要素の前・後を指定

before：指定したある要素の前にスタイルを適用(要素もどきを作成)
after：指定したある要素の後ろにスタイルを適用(要素もどきを作成)

See the Pen CSS_before-after by engineerhikaru (@engineerhikaru) on CodePen.

1行目を指定

指定したある要素の文字の1行目にスタイルを適用

See the Pen CSS_first-line by engineerhikaru (@engineerhikaru) on CodePen.

1文字目を指定

指定したある要素の文字の1文字目にスタイルを適用

See the Pen CSS_first-letter by engineerhikaru (@engineerhikaru) on CodePen.

擬似クラス

最初の子要素

最初の子要素にスタイルを適用

See the Pen CSS_first-of-type by engineerhikaru (@engineerhikaru) on CodePen.

最後の子要素

最後の子要素にスタイルを適用

See the Pen CSS_last-of-type by engineerhikaru (@engineerhikaru) on CodePen.

○番目の子要素

○番目の子要素にスタイルを適用

See the Pen CSS_nth-of-type by engineerhikaru (@engineerhikaru) on CodePen.

後ろから○番目の子要素

後ろから○番目の子要素にスタイルを適用

See the Pen CSS_nth-last-of-type by engineerhikaru (@engineerhikaru) on CodePen.

奇数の子要素

奇数の子要素にスタイルを適用

See the Pen CSS_nth-of-type-odd by engineerhikaru (@engineerhikaru) on CodePen.

偶数の子要素

偶数の子要素にスタイルを適用

See the Pen CSS_nth-of-type-even by engineerhikaru (@engineerhikaru) on CodePen.

n倍数の子要素

n倍数の子要素にスタイルを適用

See the Pen CSS_nth-of-type-n by engineerhikaru (@engineerhikaru) on CodePen.

ただ一つの場合の子要素

ただ一つの場合の子要素にスタイルを適用

See the Pen CSS_only-child by engineerhikaru (@engineerhikaru) on CodePen.

子要素が空の親要素

子要素が空の親要素にスタイルを適用

See the Pen CSS_empty by engineerhikaru (@engineerhikaru) on CodePen.

ページ内リンク先

ページ内リンク先の要素に対してクリック後のスタイルを適用

See the Pen CSS_target by engineerhikaru (@engineerhikaru) on CodePen.

ルート要素

ルート要素(htmlタグ)にスタイルを適用

See the Pen CSS_root by engineerhikaru (@engineerhikaru) on CodePen.

ダイナミック擬似クラス

ホバー状態のリンク

ホバー状態のリンクにスタイルを適用

See the Pen CSS_hover by engineerhikaru (@engineerhikaru) on CodePen.

クリック状態のリンク

クリック状態のリンクにスタイルを適用

See the Pen CSS_active by engineerhikaru (@engineerhikaru) on CodePen.

フォーカス状態のリンク

フォーカス状態のリンクにスタイルを適用
※フォーカスとは、キーボードのTabキーでの選択状態のこと

See the Pen CSS_focus by engineerhikaru (@engineerhikaru) on CodePen.

リンク擬似クラス

未訪問のリンク

未訪問のリンクにスタイルを適用

See the Pen CSS_link by engineerhikaru (@engineerhikaru) on CodePen.

訪問済のリンク

訪問済のリンクにスタイルを適用

See the Pen CSS_visited by engineerhikaru (@engineerhikaru) on CodePen.

UI要素状態擬似クラス

要素が有効な時

要素が有効な時にスタイルを適用

See the Pen CSS_enabled by engineerhikaru (@engineerhikaru) on CodePen.

要素が無効な時

要素が無効な時にスタイルを適用

See the Pen CSS_disabled by engineerhikaru (@engineerhikaru) on CodePen.

要素がチェック状態の時

要素がチェック状態の時にスタイルを適用

See the Pen CSS_checked by engineerhikaru (@engineerhikaru) on CodePen.

否定擬似クラス

○以外の要素

○以外の要素にスタイルを適用

See the Pen CSS_not by engineerhikaru (@engineerhikaru) on CodePen.

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
【CSS】セレクタチートシート | コレワカ