CSSの疑似要素と疑似クラスまとめ

この要素ってCSSでどうやって指定するんだっけ？と思った時の「疑似要素と疑似クラス」の指定方法まとめです。

これらを使いこなせるとスタイル作成が楽になったり、さまざまなデザインにCSSで対応できるようになるので、覚えて損はないものたちです。

p {
  display: inline-block;
}

疑似要素と疑似クラスの違い

疑似要素では要素の前や後ろに追加する、1文字目や1行目だけを変更するなどの「指定した要素の一部」に対してスタイルの指定をするものです。

疑似クラスでは「指定した要素全体」に対してスタイルを適用させられます。その要素自体が何かしらの状態であったり、また何番目にある要素に、といった形でスタイルを当てることができます。

コードの書き方

疑似要素も疑似クラスも、セレクターの後に追加する点は同じですが、書き方に少し違いがあります。疑似要素はコロンが2つ、疑似クラスはコロン1つ付けて、疑似要素/クラス名を指定します。

/* 疑似要素 */
p::before {
  content: 'HELLO';
  display: inline-block
}

/* 疑似クラス */
p:first-child {
  display: inline-block;
}

疑似要素と疑似クラス一覧

疑似要素

疑似クラス

【要素の状態で指定】

【要素の順番で指定】

【参照】疑似クラスと疑似要素 – 参照セクション | MDN

疑似要素と疑似クラスを併用する際は記述順に注意

疑似要素と疑似クラスを併用する場合は「:疑似クラス::疑似要素」の順で記述します。
「::疑似要素:疑似クラス」だと反映されないので、書き方の順序はしっかりおさえておきましょう。

例として以下のコードでは ::before:last-child で指定した要素は適用されません。

.item:first-child::before {
  content: 'HELLO';
  display: inline-block;
}
.item::before:last-child {
  content: 'HELLO';
  display: inline-block;
}

.item:first-child::before {
  content: 'HELLO';
  display: inline-block;
}
.item::before:last-child {
  content: 'HELLO';
  display: inline-block;
}

::before:last-child の要素には「こんにちは」の前に「HELLO」がついていないことが確認できたかと思います。:last-child::before に書き方を修正するとちゃんと表示されます。

【::before, ::after】 要素の前後に追加

::before は指定した要素の前に、::after は後ろに追加されます。

この2つは contentプロパティを指定しなければ表示されません。文字列を追加する場合は content: '文字列'; 、スタイルでつくる要素や画像などは空にして追加します content: '';。

content: ''; の場合、他にも必要なプロパティがあります。
height（高さ）やwidth（横幅）といった表示される領域を指定するプロパティと、
displayプロパティで inline-block や block などの値を設定、もしくは positionプロパティで absolute を指定します。

.box {
  background: #95d3ba;
  width: 50px;
  height: 50px;
}
.before_cont1::before {
 content: '';
 display: block;
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont2::before {
 content: '';
 display: inline-block;
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont3::before {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont4::before {
 content: '';
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont5::before {
 content: '';
 display: block;
 background-color: #000;
}

.box {
  background: #95d3ba;
  width: 50px;
  height: 50px;
}
.before_cont1::before {
 content: '';
 display: block;
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont2::before {
 content: '';
 display: inline-block;
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont3::before {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont4::before {
 content: '';
 width: 30px;
 height: 30px;
 background-color: #000;
}
.before_cont5::before {
 content: '';
 display: block;
 background-color: #000;
}

上記コードの場合、before_cont4 と before_cont5 の要素は before要素が表示されません。

【::first-letter】1文字目・【::first-line】1行目のスタイル

::first-letter で要素にあるテキストの1文字目のスタイル、
::first-line で要素にあるテキストの1行目のスタイルを指定できます。

.first_letter_change::first-letter {
  font-size: 20px;
  font-weight: 700;
  color: green;
}
.first_line_change::first-line {
  font-size: 20px;
  font-weight: 700;
  color: green;
}

.first_letter_change::first-letter {
  font-size: 20px;
  font-weight: 700;
  color: green;
}
.first_line_change::first-line {
  font-size: 20px;
  font-weight: 700;
  color: green;
}

最後の1文字（last-letter）や最後の行（last-line）といった疑似要素はないので、spanタグなどを使用して個別にスタイルを当てたりJSを利用してスタイルを当てる形になります。

【:link, :visited, :hover, :active】

この4つのクラスは記述する順番によって指定した通りに表示されないことがあります。リンクに対してそれぞれの状態でスタイルを設定する際は特に注意が必要です。

以下の順序で記述しましょう。

1. :link
2. :visited
3. :hover
4. :active