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

CSSセレクタとは

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

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

基本のセレクタ

ユニバーサルセレクタ

ユニバーサルセレクタ

*{
  プロパティ: 値;
}
タグ名で指定

タグ名で指定

div{
  プロパティ: 値;
}
class名で指定

class名で指定

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

id名で指定

#id{
  プロパティ: 値;
}
複数要素の指定

複数要素の指定

div, .class, #id{
  プロパティ: 値;
}
子孫要素

子孫要素

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

直下の子要素

div > p{
  プロパティ: 値;
}
兄弟要素

兄弟要素

div ~ p{
  プロパティ: 値;
}
隣の要素

隣の要素

div + p{
  プロパティ: 値;
}

属性セレクタ

属性で指定

属性で指定

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

属性で指定(完全一致)

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

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

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

属性で指定(前方一致)

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

属性で指定(後方一致)

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

属性で指定(部分一致)

div[class*="card"]{
  プロパティ: 値;
}

擬似要素

要素の前

要素の前

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

要素の後

div::after{
  content: '';
  プロパティ: 値;
}
1行目

1行目

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

1文字目

p::first-letter{
  プロパティ: 値;
}

擬似クラス

最初の子要素

最初の子要素

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

最後の子要素

li:last-of-type{
  プロパティ: 値;
}
○番目の子要素

○番目の子要素

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

後ろから○番目の子要素

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

奇数の子要素

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

偶数の子要素

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

n倍数の子要素

li:nth-of-type(3n){
  プロパティ: 値;
}
ただ一つの場合の子要素

ただ一つの場合の子要素

li:only-child{
  プロパティ: 値;
}
子要素が空の親要素

子要素が空の親要素

ul:empty{
  プロパティ: 値;
}
ページ内リンク先

ページ内リンク先

#id:target{
  プロパティ: 値;
}
ルート要素

ルート要素

:root{
  プロパティ: 値;
}

ダイナミック擬似クラス

ホバー状態のリンク

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

クリック状態のリンク

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

フォーカス状態のリンク

a:focus{
  プロパティ: 値;
}

リンク擬似クラス

未訪問のリンク

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

訪問済のリンク

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

UI要素状態擬似クラス

要素が有効な時

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

要素が無効な時

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

要素がチェック状態の時

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

否定擬似クラス

○以外の要素

○以外の要素

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