擬似クラスと擬似要素

擬似クラスは、特定の状態にある要素を選択するセレクターです。例えば、その型の最初の要素であるとか、ポインターを当てた状態であるなどです。擬似クラスは、あたかも文書内の一部にクラスを適用したかのように動作する傾向があり、マークアップ内の余分なクラスを削減することを支援していただくことが多く、より柔軟で保守性の高いコードを提供します。

擬似クラスはコロンで始まるキーワードです。例えば :hover は擬似クラスです。

簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスに CSS を追加できます。

<article>
  <p class="first">
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

.first {
  font-size: 120%;
  font-weight: bold;
}

しかし、これでは保守が面倒になります。文書の先頭に新しい段落が追加されたらどうでしょう？新しい段落にクラスを移さなければなりません。クラスを追加する代わりに、 :first-child 擬似クラスセレクターを使用することができます。これは常に記事の最初の子要素を対象としますので、 HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません）。

<article>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

article p:first-child {
  font-size: 120%;
  font-weight: bold;
}

すべての擬似クラスは、この同じ方法で動作します。特定の状態にある文書の一部を対象にして、 HTML にクラスを追加したかのように動作します。 MDN の他の例をいくつか見てみましょう。

• :last-child
• :only-child
• :invalid

一部の擬似クラスは、ユーザーが何らかの方法で文書を操作したときにのみ適用されます。これらのユーザー操作の擬似クラスは、動的擬似クラスと呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。

• :hover — 前述の通りです。これは、ユーザーが要素（通常はリンク）の上にポインターを載せた場合にのみ適用されます。
• :focus — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。

<p><a href="">ここにカーソルを当ててください</a></p>

a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}

a:hover {
  color: hotpink;
}

擬似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。

擬似要素はダブルコロン :: で始まります。擬似要素の例は ::before です。

たとえば、段落の最初の行を選択する場合は、それを <span> 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1 行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTML を追加してこれを確実に行うことは不可能です。

::first-line 擬似要素セレクターは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。

<article>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>

  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
</article>

article p::first-line {
  font-size: 120%;
  font-weight: bold;
}

それはまるで最初の整形された行を <span> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。

これにより、両方の段落の最初の行が選択されていることがわかります。

最初の段落の最初の行を太字にしたい場合は、 :first-child および ::first-line セレクターを連結することができます。前のライブ例を編集して、次の CSS を使用するようにしてください。 <article> 要素内にある最初の <p> 要素の最初の行を選択したいということです。

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

CSS を使用してコンテンツを文書に挿入するための content プロパティと共に使用される特別な擬似要素がいくつかあります。

以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。content プロパティのテキスト値を変更してみて、出力でそれを確認してください。 ::before 擬似要素を ::after に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。

<p class="box">この HTML ページ内のボックスのコンテンツ</p>

.box::before {
  content: "これは他のコンテンツの前に表示されます。";
}

CSS からテキストを挿入することは、ウェブ上で実に多く使用することではありません。なぜなら、そのテキストはスクリーンリーダーによってはアクセスできず、将来誰かが見つけて編集するのが難しくなるからです。

これらの擬似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。

<p class="box">この HTML ページ内のボックスのコンテンツ</p>

.box::after {
  content: " ➥";
}

これらの擬似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。

次の例では、 ::before 擬似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを display: block に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。

<p class="box">この HTML ページ内のボックスのコンテンツ</p>

.box::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  border: 1px solid black;
}

::before と ::after 擬似要素を content プロパティとともに使用することは、CSS では「生成コンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、 CSS Arrow Please のサイトで、矢印を生成するのに役立てています。矢印を作成するときの CSS を見ると、 ::before および ::after 擬似要素が使用されていることがわかります。これらのセレクターが表示されたら、content プロパティを見て、文書に何が追加されているかを確認してください。

この記事では、特殊な種類のセレクターである CSS 擬似クラスと擬似要素を紹介しました。

擬似クラスを使用すると、要素が特定の状態にあるときに、その状態のクラスを DOM に追加したかのように、その要素を対象とすることができます。擬似要素は、あたかも DOM に新しい要素を追加したかのように動作し、その要素をスタイル設定することができます。擬似要素の ::before と ::after では、 CSS を使用して文書内のコンテンツを挿入することができます。

次の記事では、結合子について学びます。

• 擬似クラスリファレンス
• 擬似要素リファレンス

• 前のページ
• Overview: CSS によるスタイル設定の基本
• 次のページ