CheatSheet
日本語 icon日本語English iconEnglish
チートシートとはカンニングペーパーのことです。それが転じて、本来覚えることをまとめておいたものです。
要点をすぐに参照できるようにまとめてみました。

CSS セレクタ

エンジニアのためのWebチートシート

【図解付き】知っておくと便利なCSSのセレクタの種類と使用例を図解付きでチートシートにまとめました。 隣接セレクタやbefore/afterといった疑似要素、何番目の要素かを指定するnth-childやhoverなどのよく使用する疑似クラスを表現する方法をまとめてみました。

基本的なセレクタ

ユニバーサルセレクタ

* {
  /* some properties */
}
<body>
<header><main><footer>

class名で指定

.sample {
  /* some properties */
}
<div>
<h1><p class='sample'><p>

ID名で指定

#sample {
  /* some properties */
}
<div>
<h1><p id='sample'><p>

子孫要素

div p {
  /* some properties */
}
<div>
<h1><p><div>
<p>

直下の子要素

.div > p {
  /* some properties */
}
<div>
<h1><p><div>
<p>

兄弟要素

h1 ~ p {
  /* some properties */
}
<div>
<h1><p><div>
<p>

隣の要素（隣接セレクタ）

.h1 + p {
  /* some properties */
}
<div>
<h1><p><div>
<p>

属性セレクタ

属性で指定

p[class] {
  /* some properties */
}
<div>
<h1><p><div>
<p class='sample'>

属性で指定（完全一致）

p[class="hoge"] {
  /* some properties */
}
<div>
<h1><p class='hoge'><p class='foo'>

属性で指定（完全一致*）

p[class~="hoge"] {
  /* some properties */
}
<div>
<h1><p class='hoge'><div><p class='hoge foo'>

属性で指定（前方一致）

p[class^="color"] {
  /* some properties */
}
<div>
<h1><p class='color-red'><div><p class='color-blue'>

属性で指定（後方一致）

p[class$="list"] {
  /* some properties */
}
<div>
<h1><p class='food-list'><div><p class='drink-list'>

属性で指定（部分一致）

p[class*="hoge"] {
  /* some properties */
}
<div>
<h1><p class='hoge-sample'><div><p class='foo-hoge-bar'>

疑似要素

before/after

h1::before {
  content: '';
  /* some properties */
}
h1::after {
  content: '';
  /* some properties */
}
<div>
<h1>

::first-line(文章の一行目)

p::first-line{
  color: red;
}

この文章は一行目だけ文字の色が赤色になります。

::first-letter(一文字目)

p::first-letter {
  color: red;
}

最初の一文字だけ文字の色が赤色になります。

疑似クラス

:nth-child(n番目の子要素)

ul li:nth-child(2) {
  /* some properties */
}
<ul>
<li><li><li><li>

:nth-last-child(最後からn番目の子要素)

ul li:nth-last-child(2) {
  /* some properties */
}
<ul>
<li><li><li><li>

:first-child(最初の子要素)

ul li:first-child {
  /* some properties */
}
<ul>
<li><li><li><li>

:last-child(最後の子要素)

ul li:last-child {
  /* some properties */
}
<ul>
<li><li><li><li>

:nth-of-type(指定した型のn番目の子要素)

p:nth-of-type(2) {
  /* some properties */
}
<div>
<p><div><p><div>

:nth-last-of-type(指定した型の最後からn番目の子要素)

p:nth-last-of-type(2) {
  /* some properties */
}
<div>
<p><div><p><div>

:first-of-type(指定した型の最初の子要素)

p:first-of-type {
  /* some properties */
}
<div>
<p><div><p><div>

:last-of-type(指定した型の最後の子要素)

p:last-of-type {
  /* some properties */
}
<div>
<p><div><p><div>

:only-child(ただ一つの場合の子要素)

ul li:only-child {
  /* some properties */
}
<ul>
<li>

:only-of-child(ただ一つの場合の指定した型の子要素)

div p:only-of-type {
  /* some properties */
}
<ul>
<h1><p><div>

:empty(要素が空の場合)

ul:empty {
  /* some properties */
}
<ul>
<li><li><li>

:target(ページ内リンク先)

#modal {
  display: none;
}
#modal:target {
  display: block;
}
<div>
<a href='#modal'><div id='modal'>

:root(文書内のルート要素)

:root {
  margin: 0;
  padding: 0;
}
<html>
<body>

ダイナミック疑似クラス

:hover(ホバー状態)

a:hover {
  text-decoration: underline;
}
hover me!

:active(アクティブ状態)

a:active {
  text-decoration: underline;
}
active me!

:focus(フォーカス状態)

a:focus {
  text-decoration: underline;
}
focus me!

リンク疑似クラス

:link(未訪問のリンク)

a:link {
  text-decoration: underline;
}
unvisited link

:visited(訪問済みのリンク)

a:visited {
  text-decoration: underline;
}
visited link

UI要素状態疑似クラス

:enabled(textareaなどが有効時のスタイル)

textarea:enabled {
  background-color: #fff;
}

:disabled(textareaなどが無効時のスタイル)

textarea:disabled {
  background-color: #999;
}

:checked(チェックされた状態)

.accordion-div {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
input[type="checkbox"]:checked + .accordion-div {
  height: auto;
  padding: 5px;
  background: #efefef;
  color: #5fb574;
  opacity: 1;
}
enjoy your coding!

否定疑似クラス

:not(特定のセレクタを除外)

li:not(:first-child) {
  /* some properties */
}
<ul>
<li><li><li><li>

Related Cheatsheets

Related Goods

  • シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    シリーズ40万部突破の大ヒット！ Webサイト制作者必見の一冊です。
    詳細をみる
  • 困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    困ったらコレ！ 目的、やりたいことで引けるリファレンスです。
    詳細をみる
  • 保守性の高いCSS設計を学べる一冊！ BEMと対比したPRECSSの手法について解説しています。
    保守性の高いCSS設計を学べる一冊！ BEMと対比したPRECSSの手法について解説しています。
    詳細をみる

WebTerm - Recommended tools

WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。

WebTerm Logo

WebTerm

Browser Terminal Sandbox for Learning CLI

開く

All Cheatsheets

エンジニア・プログラマー向けの便利なチートシートを多数まとめています(SP/Tablet/PC対応)
すべてのチートシートを見る