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

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【CSS】セレクタチートシート | コレワカ](https://korenarawakaru.com/tech/css/selector-cheatsheet)

## CSSとは
**C**ascading **S**tyle **S**heetsの略で、
ウェブページのスタイルを指定するためのマークアップ言語のこと。
HTMLなどで書かれた文書を色やフォントやレイアウトなどを変えることが可能。
[CSSリファレンス | MDN](https://developer.mozilla.org/ja/docs/Web/CSS)

## CSSセレクタとは
CSSを適用させたいHTML要素を指定するためのもの

## 基本の書き方

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

## 基本のセレクタ
### ユニバーサルセレクタ (全称セレクタ) で指定
全ての要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="wvKZpgL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_*">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKZpgL">
  CSS_*</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### タグ名で指定
指定したタグの要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="jObRYLb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_tag">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/jObRYLb">
  CSS_tag</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### class名で指定
指定したclass名の要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="OJyGzjY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_class">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyGzjY">
  CSS_class</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### id名で指定
指定したid名の要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="JjYVMrM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_id">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/JjYVMrM">
  CSS_id</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 複数要素の指定
指定した複数の要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="JjYVMMp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_multiple">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/JjYVMMp">
  CSS_multiple</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 子孫要素
指定したある要素の階層下の要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="XWmQVEa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_progeny">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/XWmQVEa">
  CSS_progeny</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ある要素の直下の子要素
指定したある要素の直下の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="LYpvemr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_below">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/LYpvemr">
  CSS_below</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ある要素の兄弟要素
指定したある要素の兄弟要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="YzyMYvR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_brother">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/YzyMYvR">
  CSS_brother</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ある要素の隣の要素
指定したある要素の隣の要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="ExVJodo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_next">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ExVJodo">
  CSS_next</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 属性セレクタ
### 属性で指定
指定した属性に一致する要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="GRpLyPb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_attribute">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/GRpLyPb">
  CSS_attribute</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 属性で指定(完全一致)
指定した属性と属性名に完全一致する要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="OJyGzGP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_attribute-perfect">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyGzGP">
  CSS_attribute-perfect</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 属性で指定(完全一致+α)
指定した属性と属性名に完全一致する要素(他に属性名があってもOK)にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="WNQWdqx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_attribute-perfectalpha">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/WNQWdqx">
  CSS_attribute-perfectalpha</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 属性で指定(前方一致)
指定した属性と属性名に前方一致する要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="NWGmyKr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_attribute-forward">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGmyKr">
  CSS_attribute-forward</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 属性で指定(後方一致)
指定した属性と属性名に後方一致する要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="PoPgQow" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_attribute-backward">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPgQow">
  CSS_attribute-backward</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 属性で指定(部分一致)
指定した属性と属性名に部分一致する要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="wvKZyBG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_attribute-part">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKZyBG">
  CSS_attribute-part</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 擬似要素
### 要素の前・後を指定
before：指定したある要素の前にスタイルを適用(要素もどきを作成)
after：指定したある要素の後ろにスタイルを適用(要素もどきを作成)
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="WNQWMZO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_before-after">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/WNQWMZO">
  CSS_before-after</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 1行目を指定
指定したある要素の文字の1行目にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="wvKZypJ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_first-line">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/wvKZypJ">
  CSS_first-line</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 1文字目を指定
指定したある要素の文字の1文字目にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="yLYrvKK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_first-letter">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/yLYrvKK">
  CSS_first-letter</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 擬似クラス
### 最初の子要素
最初の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="ZEbZrRj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_first-of-type">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ZEbZrRj">
  CSS_first-of-type</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 最後の子要素
最後の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="result" data-user="engineerhikaru" data-slug-hash="eYpoVLP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_last-of-type">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/eYpoVLP">
  CSS_last-of-type</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ○番目の子要素
○番目の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="QWjPQZa" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_nth-of-type">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/QWjPQZa">
  CSS_nth-of-type</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 後ろから○番目の子要素
後ろから○番目の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="MWaRQzq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_nth-last-of-type">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaRQzq">
  CSS_nth-last-of-type</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 奇数の子要素
奇数の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="dyYLdao" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_nth-of-type-odd">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/dyYLdao">
  CSS_nth-of-type-odd</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 偶数の子要素
偶数の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="VwvNQRv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_nth-of-type-even">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvNQRv">
  CSS_nth-of-type-even</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### n倍数の子要素
n倍数の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="KKdYQER" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_nth-of-type-n">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/KKdYQER">
  CSS_nth-of-type-n</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ただ一つの場合の子要素
ただ一つの場合の子要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="bGVJvNL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_only-child">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVJvNL">
  CSS_only-child</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 子要素が空の親要素
子要素が空の親要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="BaoErNm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_empty">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/BaoErNm">
  CSS_empty</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ページ内リンク先
ページ内リンク先の要素に対してクリック後のスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="rNObdxg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_target">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/rNObdxg">
  CSS_target</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ルート要素
ルート要素(htmlタグ)にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="NWGmYNM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_root">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGmYNM">
  CSS_root</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## ダイナミック擬似クラス
### ホバー状態のリンク
ホバー状態のリンクにスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="KKdYogr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_hover">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/KKdYogr">
  CSS_hover</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### クリック状態のリンク
クリック状態のリンクにスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="zYvXWoO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_active">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/zYvXWoO">
  CSS_active</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### フォーカス状態のリンク
フォーカス状態のリンクにスタイルを適用
※フォーカスとは、キーボードのTabキーでの選択状態のこと
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="NWGmYbz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_focus">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGmYbz">
  CSS_focus</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## リンク擬似クラス
### 未訪問のリンク
未訪問のリンクにスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="BaoErpY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_link">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/BaoErpY">
  CSS_link</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 訪問済のリンク
訪問済のリンクにスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="ZEbZxLN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_visited">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/ZEbZxLN">
  CSS_visited</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## UI要素状態擬似クラス
### 要素が有効な時
要素が有効な時にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="qBOwomZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_enabled">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/qBOwomZ">
  CSS_enabled</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 要素が無効な時
要素が無効な時にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="NWGmYjB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_disabled">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGmYjB">
  CSS_disabled</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 要素がチェック状態の時
要素がチェック状態の時にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="VwvNXzp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_checked">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/VwvNXzp">
  CSS_checked</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 否定擬似クラス
### ○以外の要素
○以外の要素にスタイルを適用
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="engineerhikaru" data-slug-hash="GRpLxMO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS_not">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/GRpLxMO">
  CSS_not</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【CSS】セレクタチートシート | コレワカ](https://korenarawakaru.com/tech/css/selector-cheatsheet)