ここでは、セレクタに関する一連の記事の3番目で、擬似セレクタについて説明します。これらは要素を選択するのではなく、むしろ要素の特定の部分、または特定のコンテキストにおける要素のみを選択します。それらは主に擬似クラス擬似要素という2つのタイプに分けられます。

擬似クラス

CSS 擬似クラスはセレクタの末尾に追加されるキーワードで、コロン (:) が前に付与されます。コロンは選択された要素をスタイルする必要があることを指定するために使用されますが、特定の状態にある場合に限られます。たとえば、リンク要素をマウスポインタでホバーしているときにのみスタイルを設定したり、無効またはチェックされているときにチェックボックスを設定したり、DOM ツリーの親の最初の子要素にスタイルを設定したりできます。

今すべての擬似クラスを掘り下げることはしません。徹底的に詳細をあなたにすべてを教えることはラーニングエリアの目的ではありません。必要に応じて、後で詳しく説明します。

擬似クラスの例

今からこれらの使い方の簡単な例を見てみましょう。まず、HTML スニペットです。

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

それから、いくつかの CSS ルール:

/* These styles will style our link
   in all states */
a {
  color: blue;
  font-weight: bold;
}

/* We want visited links to be the same color
   as non visited links */
a:visited {
  color: blue;
}

/* We highlight the link when it is
   hovered over (mouse over), activated (mouse down)
   or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

それでは、先ほど作ったリンクを使ってみましょう。

アクティブラーニング: 縞模様の情報リスト

あなたの番です。このアクティブラーニングセグメントでは、情報リンクのリストに縞模様を追加し、リンクがホバーされたときにリンクのスタイルを変更するための適切な擬似クラスを追加します。この課題では、最後の3つの規則を編集するだけで済みます。いくつかのヒント:

  1. ホバースタイル用の2番目の擬似クラスの書き方をすでに見たことがあります
  2. ゼブラストライピングのためには、:nth-of-type() のような擬似クラスを使う必要があります。これにより、2つのカラールールに、偶数と奇数のリストアイテムのスタイルを設定するための、わずかに異なるバージョンの擬似クラスが与えられます。 これを行う方法を見つけることができるかどうかを確認してください!

間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動かなくなったら、Show solution ボタンを押して答えを確認してください。

擬似要素

擬似要素は擬似クラスと非常によく似ていますが、違いがあります。これらはキーワードで、今回は2つのコロン (::) を前に付けて、要素の特定の部分を選択するためにセレクタの最後に追加できます。

それらはすべていくつかの非常に特定の振る舞いと面白い機能を持っていますが、すべてを詳細に掘り下げることは今回の範囲外です。

擬似要素の例

ここではすべての絶対リンクの直後のスペースを選択し、そのスペースに矢印を追加する単純な CSS の例を示します。

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

この CSS ルールを追加しましょう:

/* All elements with an attribute "href" with values
   starting with "http" will have an arrow added after their
   content (to indicate they are external links) */
[href^=http]::after {
  content: '⤴';
}

この結果が得られます。

アクティブラーニング:派手なパラグラフ

アクティブラーニングのために次のステップでは、スタイルに派手な段落があります! ここでやらなければならないのは、::first-line::first-letter の疑似要素を使用して、2つのルールセットを段落の最初の行と最初の文字に適用することだけです。これは段落の最初の行を太字で、最初の文字をすてきなドロップキャップとしてスタイルし、古いスタイルの雰囲気にします。

間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動かなくなったら、Show solution ボタンを押して答えを確認してください。

次へ

Combinator と複数のセレクタを見て、CSSセレクタのツアーを締めくくります。

このモジュール

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,