path: root/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html

---
title: 疑似クラスと疑似要素
slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

<p>次に取り上げるセレクターのセットは、<strong>疑似クラス</strong>と<strong>疑似要素</strong>と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連するMDNページは、ブラウザーサポートの説明に役立ちます。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件：</th>
   <td>基本的なコンピュータリテラシー、<a href="/ja/Learn/Getting_started_with_the_web/Installing_basic_software">インストールされている基本的なソフトウェア</a><a href="/ja/Learn/Getting_started_with_the_web/Dealing_with_files">、ファイルの操作</a>に関する基本的な知識、HTMLの基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTMLの概要を</a>学ぶ）、CSSのしくみ（<a href="/ja/docs/Learn/CSS/First_steps">CSSの最初のステップを</a>学ぶ）。</td>
  </tr>
  <tr>
   <th scope="row">目的：</th>
   <td>疑似クラスおよび疑似要素セレクターについて学習します。</td>
  </tr>
 </tbody>
</table>

<h2 id="疑似クラスとは何ですか？">疑似クラスとは何ですか？</h2>

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

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

<pre class="notranslate">:<em>疑似クラス名</em></pre>

<h3 id="単純な疑似クラスの例">単純な疑似クラスの例</h3>

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

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>

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

<ul>
 <li><code><a href="/ja/docs/Web/CSS/:last-child">:last-child</a></code></li>
 <li><code><a href="/ja/docs/Web/CSS/:only-child">:only-child</a></code></li>
 <li><code><a href="/ja/docs/Web/CSS/:invalid">:invalid</a></code></li>
</ul>

<h3 id="ユーザーアクション疑似クラス">ユーザーアクション疑似クラス</h3>

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

<ul>
 <li><code><a href="/ja/docs/Web/CSS/:hover">:hover</a></code> — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。</li>
 <li><code><a href="/ja/docs/Web/CSS/:focus">:focus</a></code> — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。</li>
</ul>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>

<h2 id="疑似要素とは何ですか？">疑似要素とは何ですか？</h2>

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

<pre class="notranslate"><em>::疑似要素名</em></pre>

<div class="blockIndicator note">
<p><strong>注</strong>：一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。</p>
</div>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>

<p>それはまるで最初のフォーマットされた行を <code>&lt;span&gt;</code> で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。</p>

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

<h2 id="疑似クラスと疑似要素を組み合わせる">疑似クラスと疑似要素を組み合わせる</h2>

<p>最初の段落の最初の行を太字にしたい場合は <code>:first-child</code> 、 <code>::first-line</code> セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次のCSSを使用するようにしてください。<span class="tlid-translation translation" lang="ja"><span title="">&lt;article&gt;要素内にある最初の <code>&lt;p&gt;</code> 要素の最初の行を選択したいと言っています。</span></span></p>

<pre class="brush: css notranslate"> <code>article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}</code></pre>

<h2 id="beforeおよび_afterを使用したコンテンツの生成">:: beforeおよび:: afterを使用したコンテンツの生成</h2>

<p>CSSを使用してコンテンツをドキュメントに挿入するための <code><a href="/ja/docs/Web/CSS/content">content</a></code> プロパティと共に使用される特別な疑似要素がいくつかあります。</p>

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

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>

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

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

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>

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

<h2 id="参照セクション">参照セクション</h2>

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

<h3 id="疑似クラス">疑似クラス</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">セレクタ</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{cssxref(":active")}}</td>
   <td>ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":any-link")}}</td>
   <td>リンクの <code>:link</code> と <code>:visited</code> 状態の両方に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":blank")}}</td>
   <td>入力値が空の<a href="/ja/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code> 要素に</a>一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":checked")}}</td>
   <td>選択状態のラジオボタンまたはチェックボックスに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":current")}}</td>
   <td>現在表示されている要素または要素の祖先と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":default")}}</td>
   <td>類似要素のセットの中でデフォルトである1つ以上のUI要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":dir")}}</td>
   <td>方向性（HTML <code><a href="/ja/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性またはCSS <code><a href="/ja/docs/Web/CSS/direction">direction</a></code> プロパティの値）に基づいて要素を選択します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":disabled")}}</td>
   <td>無効な状態のユーザーインターフェイス要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":empty")}}</td>
   <td>オプションの空白以外の子を持たない要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":enabled")}}</td>
   <td>有効な状態のユーザーインターフェイス要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":first")}}</td>
   <td><a href="/ja/docs/Web/CSS/Paged_Media">ページ媒体</a>では、最初のページと一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":first-child")}}</td>
   <td>兄弟の中で最初にある要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":first-of-type")}}</td>
   <td>兄弟の中で最初にある特定のタイプの要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":focus")}}</td>
   <td>要素にフォーカスがあるときに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":focus-visible")}}</td>
   <td>要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":focus-within")}}</td>
   <td>フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":future")}}</td>
   <td>現在の要素の後の要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":hover")}}</td>
   <td>ユーザーが要素にカーソルを合わせると一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":indeterminate")}}</td>
   <td>値が不確定な状態のUI要素、通常は<a href="/ja/docs/Web/HTML/Element/input/checkbox">チェックボックスに</a>一致し<a href="/ja/docs/Web/HTML/Element/input/checkbox">ます</a>。</td>
  </tr>
  <tr>
   <td>{{cssxref(":in-range")}}</td>
   <td>範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。</td>
  </tr>
  <tr>
   <td>{{cssxref(":invalid")}}</td>
   <td>無効な状態の <code>&lt;input&gt;</code> のような要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":lang")}}</td>
   <td>言語（HTML <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a>属性の値）に基づいて要素を<a href="/ja/docs/Web/HTML/Global_attributes/lang">照合し</a>ます。</td>
  </tr>
  <tr>
   <td>{{cssxref(":last-child")}}</td>
   <td>兄弟の中で最後にある要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":last-of-type")}}</td>
   <td>兄弟の中で最後にある特定のタイプの要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":left")}}</td>
   <td><a href="/ja/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、左側のページと一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":link")}}</td>
   <td>未訪問のリンクに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":local-link")}}</td>
   <td>現在のドキュメントと同じサイトにあるページを指すリンクに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":is", ":is()")}}</td>
   <td>渡されたセレクターリスト内の任意のセレクターに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":not")}}</td>
   <td>このセレクターに値として渡されるセレクターで一致しないものと一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":nth-​​child")}}</td>
   <td>兄弟のリストの要素に一致します — 兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1は1、3、5、7番目などの要素に一致します。すべてが奇数です）。</td>
  </tr>
  <tr>
   <td>{{cssxref(":nth-​​of-type")}}</td>
   <td>特定のタイプの兄弟（ <code>&lt;p&gt;</code> 要素など）のリストの要素に一致します — 兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、その要素のタイプの1、3、5 、7番目などに一致します。すべて奇数です。）</td>
  </tr>
  <tr>
   <td>{{cssxref(":nth-​​last-child")}}</td>
   <td>兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は<var>an+b</var>の形式の式で一致します（たとえば、2n + 1はシーケンスの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td>
  </tr>
  <tr>
   <td>{{cssxref(":nth-​​last-of-type")}}</td>
   <td>特定のタイプの兄弟のリスト（ <code>&lt;p&gt;</code> 要素など）の要素を最後から逆に数えて一致させます。兄弟は<var>、an+b</var>という形式の式で一致します（たとえば、2n + 1は、シーケンス内のそのタイプの最後の要素、次にその2つ前の要素、次にその2つ前の要素などと一致します。最後から数えてすべての奇数の要素。）</td>
  </tr>
  <tr>
   <td>{{cssxref(":only-child")}}</td>
   <td>兄弟がない要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":only-of-type")}}</td>
   <td>兄弟間でそのタイプの唯一の要素である要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":optional")}}</td>
   <td>不要なフォーム要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":out-of-range")}}</td>
   <td>範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。</td>
  </tr>
  <tr>
   <td>{{cssxref(":past")}}</td>
   <td>現在の要素より前の要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":placeholder-shown")}}</td>
   <td>プレースホルダーテキストを表示しているinput要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":playing")}}</td>
   <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":paused")}}</td>
   <td>「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":read-only")}}</td>
   <td>ユーザーが変更できない要素と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":read-write")}}</td>
   <td>ユーザーが変更可能な要素と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":required")}}</td>
   <td>必要なフォーム要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":right")}}</td>
   <td><a href="/ja/docs/Web/CSS/CSS_Pages">ページ媒体</a>では、右側のページに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":root")}}</td>
   <td>ドキュメントのルートである要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":scope")}}</td>
   <td>スコープ要素であるすべての要素に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":valid")}}</td>
   <td><code>&lt;input&gt;</code> 要素などで要素が有効な状態のときに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref(":target")}}</td>
   <td>現在のURLのターゲットである場合（つまり、現在の<a href="https://en.wikipedia.org/wiki/Fragment_identifier">URLフラグメントに</a>一致するIDを持つ場合）、要素に一致し<a href="https://en.wikipedia.org/wiki/Fragment_identifier">ます</a>。</td>
  </tr>
  <tr>
   <td>{{cssxref(":visited")}}</td>
   <td>訪問したリンクに一致します。</td>
  </tr>
 </tbody>
</table>

<h3 id="疑似要素">疑似要素</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">セレクタ</th>
   <th scope="col">説明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{cssxref("::after")}}</td>
   <td>元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::before")}}</td>
   <td>元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::first-letter")}}</td>
   <td>要素の最初の文字と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::first-line")}}</td>
   <td>含まれている要素の最初の行と一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::grammar-error")}}</td>
   <td>ブラウザによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::marker")}}</td>
   <td>通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::selection")}}</td>
   <td>選択されたドキュメントの部分に一致します。</td>
  </tr>
  <tr>
   <td>{{cssxref("::spelling-error")}}</td>
   <td>ブラウザによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。</td>
  </tr>
 </tbody>
</table>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

<h2 id="このモジュールでは">このモジュールでは</h2>

<ol>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSSセレクター</a>
  <ul>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">タイプ、クラス、IDセレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">疑似クラスと疑似要素</a></li>
   <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators">コンビネーター</a></li>
  </ul>
 </li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/The_box_model">ボックスモデル</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景と枠線</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">異なるテキスト方向の処理</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">あふれるコンテンツ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">値と単位</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSSでのアイテムのサイズ変更</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像、メディア、フォーム要素</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Styling_tables">スタイリングテーブル</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSSのデバッグ</a></li>
 <li><a href="/ja/docs/Learn/CSS/Building_blocks/Organizing">CSSの整理</a></li>
</ol>