CSS セレクタ

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

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

* {
  /* some properties */
}

.sample {
  /* some properties */
}

#sample {
  /* some properties */
}

div p {
  /* some properties */
}

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

h1 ~ p {
  /* some properties */
}

.h1 + p {
  /* some properties */
}

p[class] {
  /* some properties */
}

p[class="hoge"] {
  /* some properties */
}

p[class~="hoge"] {
  /* some properties */
}

p[class^="color"] {
  /* some properties */
}

p[class$="list"] {
  /* some properties */
}

p[class*="hoge"] {
  /* some properties */
}

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

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

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

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

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

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

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

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

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

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

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

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

div p:only-of-type {
  /* some properties */
}

ul:empty {
  /* some properties */
}

#modal {
  display: none;
}
#modal:target {
  display: block;
}

:root {
  margin: 0;
  padding: 0;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

a:focus {
  text-decoration: underline;
}

a:link {
  text-decoration: underline;
}

a:visited {
  text-decoration: underline;
}

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

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

.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;
}

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

YouTube

GraphicCodeプログラミングchannel

設計やデザインパターンなど、特定のプログラミング言語に依存しないトピックを【図解】付きで解説するYouTubeチャンネルです。
初級エンジニアが中・上級エンジニアにステップアップするお手伝いができれば嬉しいです。