困った時に使える擬似要素と擬似クラス

擬似クラスや擬似要素は増えていて、５年くらい前に覚えた知識と現状はかなり変わっています。
以前はJavaScriptで行なっていたような実装もCSSのみで行えるようになってきました。
そこでもう少し手軽にいろいろできないかなと思い、自分のメモがてらまとめました。

擬似要素

名前の通り擬似的な要素です。英語では「pseudo elements」で検索すると引っかかります。CSS3になってからはコロン２つで表現します。

::before

beforeは要素内の要素の先頭に対して、擬似的な要素を作成します。

<p class='paragraph'>textextextextext</p

.paragraph {
  color: #333;

  &::before {
    content: 'BEFORE';
    color: #f00;
  }
}

See the Pen 擬似要素::before by yutasuzuki (@yutasuzuki) on CodePen.

::after

afterは要素内の要素の最後に対して、擬似的な要素を作成します。

<p class='paragraph'>textextextextext</p

.paragraph {
  color: #333;

  &::after {
    content: 'AFTER';
    color: #f00;
  }
}

See the Pen 擬似要素::after by yutasuzuki (@yutasuzuki) on CodePen.

::selection

selectionは要素内のテキストを選択した際にスタイルを変化させます。

<p class='paragraph'>
  textextextextexttextextextext<br>
  texttextextextextexttextextextextext<br>
  textextextextexttextextextextexttextextextextext<br>
  textextextextexttextextextextext
</p

.paragraph {
  color: #333;

  &::selection {
    color: #fff;
    background-color: #333;
  }
}

See the Pen 擬似要素::selection by yutasuzuki (@yutasuzuki) on CodePen.

::first-letter

first-letterは要素の先頭の文字に対してスタイルを変化させます。

<p class='paragraph'>
  textextextextexttextextextext<br>
  texttextextextextexttextextextextext
</p

.paragraph {
  color: #333;

  &::first-letter {
    font-size: 2rem;
  }
}

See the Pen 擬似要素::first-letter by yutasuzuki (@yutasuzuki) on CodePen.

::first-line

first-lineはblock要素の１行目に対してスタイルを変化させます。inline要素に対してはスタイルは変更されません。

<p class='paragraph'>
  textextextextexttextextextext<br>
  texttextextextextexttextextextextext
</p>  
<span class='paragraph'>
  textextextextexttextextextext<br>
  texttextextextextexttextextextextext
</span>

.paragraph {
  color: #333;

  &::first-line {
    font-size: 2rem;
  }
}

See the Pen 擬似要素::first-line by yutasuzuki (@yutasuzuki) on CodePen.

擬似クラス

:active

activeはボタンなどを押した時にスタイルを変化させます。

<a class='anchor'>click!!</a>

.anchor {
  color: #007bff;
  font-size: 4rem;
  font-weight: bold;

  &:active {
    color: #0062cc;
  }
}

See the Pen 擬似クラス:active by yutasuzuki (@yutasuzuki) on CodePen.

:checked

checkedはチェックボックスにチェックがついた状態にスタイルを変化させます。

<input type='checkbox' id='foo'><label for='foo'>hoge</label>

input:checked + label {
  color: red;
}

See the Pen 擬似クラス:checked by yutasuzuki (@yutasuzuki) on CodePen.

:default

defaultはチェックボックスなどでデフォルトでチェックが入っているもののスタイルを変更します。

<input type='radio' name='foo' id='baz'><label for='baz'>baz</label>
<input type='radio' name='foo' id='bar' checked><label for='bar'>bar</label>

input:default + label {
  color: red;
  font-weight: bold;
  font-size: 4rem;
}

See the Pen 擬似クラス:default by yutasuzuki (@yutasuzuki) on CodePen.

:disabled

disabledはinput要素などが無効の時にスタイルを変更します。

<input type='text' placeholder='名前' disabled>

input:disabled {
  background: #ccc;
}

See the Pen 擬似クラス:disabled by yutasuzuki (@yutasuzuki) on CodePen.

:empty

emptyは子要素を持たない要素のスタイルを変更します。

<p></p>
<p>foo</p>

p {
  padding: 15px;

  &:empty {
    background-color: #e77;
  }
}

See the Pen 擬似クラス:empty by yutasuzuki (@yutasuzuki) on CodePen.

:enabled

enabledはdisabledとは逆で、入力可能なもののスタイルを変更します。

<input type='text' placeholder='enabled'>
<input type='text' placeholder='disabled' disabled>

input {
  padding: 5px 10px;

  &:enabled {
    background-color: #cff;
  }

  &:disabled {
    background-color: #fcc;
  }
}

See the Pen 擬似クラス:enabled by yutasuzuki (@yutasuzuki) on CodePen.

:first-child

first-childは兄弟要素の一番はじめの要素のスタイルを変化させます。

<p>foofoofoofoofoofoo</p>
<p>barbarbarbarbarbarbarbar</p>

<div>
  <p>bazbazbazbazbazbazbazbazbazbaz</p>
</div>

p {
  &:first-child {
    color: #e33;
    background-color: #333;
    padding: 5px 10px;
  }
}

See the Pen 擬似クラス:first-child by yutasuzuki (@yutasuzuki) on CodePen.

:first-of-type

first-of-typeは兄弟要素のグループの中でその種類の最初の要素のスタイルを変化させます。

<p>foofoofoofoofoofoo</p>
<p>barbarbarbarbarbarbarbar</p>

<div>
  <p>bazbazbazbazbazbazbazbazbazbaz</p>
  <p>foofoofoofoofoofoo</p>
  <p>barbarbarbarbarbarbarbar</p>
</div>

p:first-of-type {
  color: #009;
  font-weight: bold;
}

See the Pen 擬似クラス:first-of-type by yutasuzuki (@yutasuzuki) on CodePen.

:focus

focusはinputやtextareaなど入力要素があるものにフォーカスが当たった際にスタイルを変化させます。

<input type='text' placeholder='focus'>

input {
  padding: 5px 10px;

  &:focus {
    background-color: #9f9;
  }
}

See the Pen 擬似クラス:focus by yutasuzuki (@yutasuzuki) on CodePen.

:focus-within

focus-withinは子や孫要素がフォーカスされた際にスタイルを変化させます。

<section>
  <input type='text' placeholder='focus-within'>
</section>

section {
  padding: 15px;

  &:focus-within {
    background-color: #fcc;
    border: 1px #f99 solid;
  }
}

See the Pen 擬似クラス:focus-within by yutasuzuki (@yutasuzuki) on CodePen.

:hover

hoverはマウスが乗った時にスタイルが変化します。

<a href="#">hover</a>

a:hover {
  color: red;
}

See the Pen 擬似クラス:hover by yutasuzuki (@yutasuzuki) on CodePen.

:in-range

in-rangeは指定された許容範囲内に入っている時にスタイルを変化させます。

<input type='number' placeholder='1から10を入力してください' min='1' max='10' value='11'>

input {
  width: 160px;
  padding: 10px 15px;
  font-size: 2rem;

  &:in-range {
    background-color: #0e5;
  }

  &:out-of-range {
    background-color: #e66;
  }
}

See the Pen 擬似クラス:in-range by yutasuzuki (@yutasuzuki) on CodePen.

:valid

<input type='number' placeholder='必ず半角数字を入れて下さい' required>

input {
  width: 240px;
  padding: 5px 10px;

  &:valid {
    background-color: #dfd;
  }
}

See the Pen 擬似クラス:valid by yutasuzuki (@yutasuzuki) on CodePen.

:invalid

<input type='number' placeholder='必ず半角数字を入れて下さい' required>

input {
  width: 240px;
  padding: 5px 10px;

  &:invalid {
    background-color: #fcc;
  }
}

See the Pen 擬似クラス:invalid by yutasuzuki (@yutasuzuki) on CodePen.

:any()

複数のclassや要素を指定することができます。

<article>
  <p>ArticleArticleArticleArticleArticle</p>
</article>
<div class='foo'>
  <p>FooFooFooFooFooFoo</p>
</div>
<section>
  <p>SectionSectionSectionSectionSection</p>
</section>

:-webkit-any(article, .foo) p:hover {
  color: red;
  cursor: pointer;
}

See the Pen 擬似クラス:any() by yutasuzuki (@yutasuzuki) on CodePen.

:not()

指定された要素やクラス以外のもののスタイルを変化させます。

<section>
  <p>ParagraphParagraphParagraph</p>
  <div>DivDivDivDivDivDivDivDiv</div>
  <span>SpanSpanSpanSpanSpanSpan</span>
</section>

<ul>
  <li>11111111</li>
  <li>22222222</li>
  <li>33333333</li>
</ul>

section > *:not(p) {
  color: #070;
}

ul > li:not(:last-child) {
  color: #700;
}

See the Pen 擬似クラス:not() by yutasuzuki (@yutasuzuki) on CodePen.

:optional

optionalは任意入力項目のスタイルを変化させます。

<input type='text' placeholder='optional'>
<input type='text' placeholder='required' required>

input {
  padding: 5px 10px;

  &:optional {
    border: 1px solid #0cc;
  }

  &:required {
    border: 1px solid #c00;
  }
}

See the Pen 擬似クラス:required by yutasuzuki (@yutasuzuki) on CodePen.

:required

requiredは必須項目のスタイルを変化させます。

<input type='text' placeholder='optional'>
<input type='text' placeholder='required' required>

input {
  padding: 5px 10px;

  &:optional {
    border: 1px solid #0cc;
  }

  &:required {
    border: 1px solid #c00;
  }
}

See the Pen 擬似クラス:required by yutasuzuki (@yutasuzuki) on CodePen.

まとめ

まとめてみると前から知っていれば、もっと効果的に使えそうだなーっていうのも結構あります。
今回これをやりなおそうと思ったきっかけは、後輩が:not()をうまく使っており自分の擬似クラスへの理解がまだまだ足りないと感じたからです。どうしても好きな分野でないと過去の遺産や知識で片付けてしまうので、世代が違う子は本当に刺激になります。