【CSS】セレクタチートシート | コレワカ

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

CSSセレクタとは

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

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

基本のセレクタ

ユニバーサルセレクタ

*{
  プロパティ: 値;
}

タグ名で指定

div{
  プロパティ: 値;
}

class名で指定

.class{
  プロパティ: 値;
}

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行目

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

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倍数の子要素

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){
  プロパティ: 値;
}