【CSS】セレクタチートシート TECH

CSSセレクタとは

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

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

基本のセレクタ

ユニバーサルセレクタ

すべての要素を対象とする

ユニバーサルセレクタ
CSS
*{
  プロパティ:;
}

タグ名で指定

要素名で指定した要素を対象とする

タグ名で指定
CSS
div{
  プロパティ:;
}

class名で指定

クラス名を付けた要素を対象とする

class名で指定
CSS
.class{
  プロパティ:;
}

id名で指定

id名を付けた要素を対象とする

id名で指定
CSS
#id{
  プロパティ:;
}

複数要素の指定

複数の要素を対象とする

複数要素の指定
CSS
div, .class, #id{
  プロパティ:;
}

子孫要素

下の階層の子孫要素を対象とする

子孫要素
CSS
div p{
  プロパティ:;
}

直下の子要素

直下の階層の子要素を対象とする

直下の子要素
CSS
div > p{
  プロパティ:;
}

兄弟要素

指定した要素より後の階層の要素全てを対象とする

兄弟要素
CSS
div ~ p{
  プロパティ:;
}

隣の要素

直後に隣接している要素を対象とする

隣の要素
CSS
div + p{
  プロパティ:;
}

属性セレクタ

属性で指定

特定の属性を持つ指定要素を対象とする

属性で指定
CSS
div[class]{
  プロパティ:;
}

属性で指定(完全一致)

特定の属性値を持つ指定要素を対象とする

属性で指定(完全一致)
CSS
div[class="card"]{
  プロパティ:;
}

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

属性値候補と一致した要素(他の属性値は考慮しない)を対象とする

属性で指定(完全一致+α)
CSS
div[class~="card"]{
  プロパティ:;
}

属性で指定(前方一致)

属性値候補と前方一致した要素を対象とする

属性で指定(前方一致)
CSS
div[class^="card"]{
  プロパティ:;
}

属性で指定(後方一致)

属性値候補と後方一致した要素を対象とする

属性で指定(後方一致)
CSS
div[class$="list"]{
  プロパティ:;
}

属性で指定(部分一致)

属性値候補と部分一致した要素を対象とする

属性で指定(部分一致)
CSS
div[class*="card"]{
  プロパティ:;
}

擬似要素

要素の前

要素の直前を対象とする

要素の前
CSS
div::before{
  content: '';
  プロパティ:;
}

要素の後

要素の直後を対象とする

要素の後
CSS
div::after{
  content: '';
  プロパティ:;
}

1行目

要素の最初の一行を対象とする

1行目
CSS
p::first-line{
  プロパティ:;
}

1文字目

要素の最初の一文字を対象とする

1文字目
CSS
p::first-letter{
  プロパティ:;
}

擬似クラス

最初の子要素

最初の子要素を対象とする

最初の子要素
CSS
li:first-of-type{
  プロパティ:;
}

最後の子要素

最後の子要素を対象とする

最後の子要素
CSS
li:last-of-type{
  プロパティ:;
}

○番目の子要素

○番目の子要素を対象とする

○番目の子要素
CSS
li:nth-of-type(2){
  プロパティ:;
}

後ろから○番目の子要素

後ろから○番目の子要素を対象とする

後ろから○番目の子要素
CSS
li:nth-last-of-type(2){
  プロパティ:;
}

奇数の子要素

奇数の子要素を対象とする

奇数の子要素
CSS
li:nth-of-type(odd){
  プロパティ:;
}

偶数の子要素

偶数の子要素を対象とする

偶数の子要素
CSS
li:nth-of-type(even){
  プロパティ:;
}

n倍数の子要素

n倍数の子要素を対象とする

n倍数の子要素
CSS
li:nth-of-type(3n){
  プロパティ:;
}

ただ一つの場合の子要素

子要素がただ一つの場合の時の要素を対象とする

ただ一つの場合の子要素
CSS
li:only-child{
  プロパティ:;
}

子要素が空の親要素

子要素が空の親要素を対象とする

子要素が空の親要素
CSS
ul:empty{
  プロパティ:;
}

ページ内リンク先

ページ内リンク先を対象とする

ページ内リンク先
CSS
#id:target{
  プロパティ:;
}

ルート要素

ルート要素を対象とする(CSS変数をここに書く事が多い)

ルート要素
CSS
:root{
  プロパティ:;
}

ダイナミック擬似クラス

ホバー状態の要素

ホバー状態の要素を対象とする

CSS
a:hover{
  プロパティ:;
}

クリック状態の要素

クリック状態の要素を対象とする

CSS
a:active{
  プロパティ:;
}

フォーカス状態の要素

フォーカス状態の要素を対象とする

CSS
input:focus{
  プロパティ:;
}

リンク擬似クラス

未訪問のリンク

未訪問のリンクを対象とする

CSS
a:link{
  プロパティ:;
}

訪問済のリンク

訪問済のリンクを対象とする

CSS
a:visited{
  プロパティ:;
}

UI要素状態擬似クラス

要素が有効な時

要素が有効な時を対象とする

CSS
input:enabled{
  プロパティ:;
}

要素が無効な時

要素が無効な時を対象とする

CSS
input:disabled{
  プロパティ:;
}

要素がチェック状態の時

要素がチェック状態の時を対象とする

CSS
input:checked{
  プロパティ:;
}

否定擬似クラス

○以外の要素

○以外の要素を対象とする

CSS
li:not(:first-child){
  プロパティ:;
}