疑似クラスと疑似要素

疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。

疑似クラスは、コロンで始まるキーワードです。

:疑似クラス名

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

ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか？クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、:first-child 疑似クラスセレクターを使用できます。これにより、常に記事の最初の子要素がターゲットになり、HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません。）

すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTML にクラスを追加したかのように動作します。MDN の他の例をいくつか見てみましょう。

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

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

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

疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり :: ます。

::疑似要素名

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

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

それはまるで最初のフォーマットされた行を <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 に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。

CSS からテキストの文字列を挿入することは、実際には Web で頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。

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

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

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

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

疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDN のリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。

• 前のページ
• Overview: Building blocks
• 次のページ