path: root/files/ja/learn/css/building_blocks/selectors/index.html

---
title: CSS セレクター
slug: Learn/CSS/Building_blocks/Selectors
tags:
  - Attribute
  - Beginner
  - CSS
  - Class
  - Learn
  - Pseudo
  - Selectors
  - id
translation_of: Learn/CSS/Building_blocks/Selectors
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>

<p class="summary">{{Glossary("CSS")}}では、ウェブページ上の {{glossary("HTML")}} 要素にスタイルを設定するためにセレクターが使用されます。CSS セレクターにはさまざまな種類があり、きめ細かにスタイルを設定する要素を選択できます。この記事とそのサブ記事では、さまざまなタイプについて、どのように機能するかを詳しく見ていきます。</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>CSS セレクターがどのように機能するかを学ぶ。</td>
  </tr>
 </tbody>
</table>

<h2 id="What_is_a_selector" name="What_is_a_selector">セレクターとは</h2>

<p>実はもうこれまでにセレクターを見たことがあるはずです。CSS セレクターは、CSS のもっとも基本的なルールとなるものです。要素やその他を選択して CSS プロパティ値を適用する HTML 要素をブラウザーに伝えるものです。セレクターによって選択される要素は、選択対象 <em>(subject of the selector</em>) と呼ばれます。</p>

<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>

<p>これまでの記事で <code>h1</code> 要素や <code>.special</code> クラスなどのいくつかのセレクターを見てきました。それらはドキュメント内の対象をさまざまな方法で指定できるということも学びました。</p>

<p>"CSS セレクター仕様" (<em>CSS Selectors specification</em>) で、CSS のセレクターは定義されています。CSS の他の部分と同様に、それらが機能するにはブラウザーでのサポートが必要です。よく使うセレクターは確定仕様である <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a> で定義されているため、ブラウザーサポートも期待できます。</p>

<h2 id="Selector_lists" name="Selector_lists">セレクター一覧</h2>

<p>同じ CSS を使用するものが複数ある場合は、セレクターリストでまとめてルールを適用することができます。たとえば、<code>h1</code> と <code>.special</code> クラスが同じ CSS だとして、2 つの個別のルールとして記述できます。</p>

<pre class="brush: css"><code>h1 {
  color: blue;
}

.special {
  color: blue;
} </code></pre>

<p>カンマ区切りでセレクターリストにもできます。</p>

<pre class="brush: css"><code>h1, .special {
  color: blue;
} </code></pre>

<p>カンマの前後に空白を入れることもできますし、改行したほうがセレクターを見つけやすくなり読みやすいかもしれません。</p>

<pre class="brush: css"><code>h1,
.special {
  color: blue;
} </code></pre>

<p>以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が同じになるように留意してください。</p>

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

<p>この方法でセレクターをグループ化していると、無効なセレクターがある場合はルール全体が無視されます。</p>

<p>以下の例では無効なセレクターは無視され、<code>h1</code> だけがスタイル適用されます。</p>

<pre class="brush: css"><code>h1 {
  color: blue;
}

..special {
  color: blue;
} </code></pre>

<p><br>
 ただし結合した場合は、<code>h1</code> もクラスも無効なものとしてスタイルされません。</p>

<pre class="brush: css"><code>h1, ..special {
  color: blue;
} </code></pre>

<h2 id="Types_of_selectors" name="Types_of_selectors">セレクターの種類</h2>

<p>セレクターにはいくつかの異なるグループがあり、どれが必要かを知ることは有用です。ここのサブ記事ではさまざまなセレクターグループを詳しく見ていきます。</p>

<h3 id="Type_class_and_ID_selectors" name="Type_class_and_ID_selectors">要素・クラス・ID によるセレクター</h3>

<p>このグループには <code>&lt;h1&gt;</code> のような HTML 要素を対象とするセレクターを含みます。</p>

<pre class="brush: css">h1 { }</pre>

<p>同様にクラスを対象としたセレクターも含みます。</p>

<pre class="brush: css">.box { }</pre>

<p>あとは ID です。</p>

<pre class="brush: css">#unique { }</pre>

<h3 id="Attribute_selectors" name="Attribute_selectors">属性によるセレクター</h3>

<p>このセレクターグループは要素の属性によるさまざまな選択方法を提供します。</p>

<pre class="brush: css">a[title] { }</pre>

<p>特定の値を持つ属性で選択することもできます。</p>

<pre class="brush: css">a[href="https://example.com"] { }</pre>

<h3 id="Pseudo-classes_and_pseudo-elements" name="Pseudo-classes_and_pseudo-elements">擬似クラスおよび疑似要素によるセレクター</h3>

<p>このセレクターグループは、要素の特定の状態をスタイルする疑似クラスを含みます。たとえば、<code>:hover</code> 擬似クラスはマウスポインターがホバーしているときにのみ要素を選択します。</p>

<pre class="brush: css">a:hover { }</pre>

<p>また要素自体ではなく要素の特定の部分を選択する擬似要素もあります。たとえば、<code>::first-line</code> は要素 (以下では <code>&lt;p&gt;</code>) 内の最初の行をまるで <code>&lt;span&gt;</code> でラップしてスタイルしたかのように動作します。</p>

<pre class="brush: css">p::first-line { }</pre>

<h3 id="Combinators" name="Combinators">結合子</h3>

<p>最後のセレクターグループは、セレクターを組み合わせて文書内のターゲット要素を選びます。たとえば、以下では子コンビネータ (<code>&gt;</code>) によって <code>&lt;article&gt;</code> 要素の直接の子である段落を選択します。</p>

<pre class="brush: css">article &gt; p { }</pre>

<h2 id="Next_steps" name="Next_steps">次のステップ</h2>

<p>この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a>から見ていくこともできます。</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>

<h2 id="Reference_table_of_selectors" name="Reference_table_of_selectors">セレクターのリファレンス表</h2>

<p>以下の表で使用可能な各セレクターの概要と、それぞれの使い方を示すガイド内ページへのリンクを紹介します。そこには各セレクターのブラウザーサポートを確認できる MDN ページへのリンクもあります。セレクターを検索したり一般的に CSS を体験するときに、ここに戻ってきて参照することができます。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">セレクター</th>
   <th scope="col">例</th>
   <th scope="col">CSS チュートリアル</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Type_selectors">要素セレクター</a></td>
   <td><code>h1 {  }</code></td>
   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">要素セレクター</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></td>
   <td><code>* {  }</code></td>
   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">全称セレクター</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></td>
   <td><code>.box {  }</code></td>
   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">クラスセレクター</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></td>
   <td><code>#unique { }</code></td>
   <td><a href="/ja/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID セレクター</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></td>
   <td><code>a[title] {  }</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">属性によるセレクター</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラスセレクター</a></td>
   <td><code>p:first-child { }</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">疑似クラス</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素セレクター</a></td>
   <td><code>p::first-line { }</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">疑似要素</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></td>
   <td><code>article p</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">子孫結合子</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></td>
   <td><code>article &gt; p</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">子結合子</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></td>
   <td><code>h1 + p</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">隣接兄弟</a></td>
  </tr>
  <tr>
   <td><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></td>
   <td><code>h1 ~ p</code></td>
   <td><a href="/ja/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">一般兄弟</a></td>
  </tr>
 </tbody>
</table>

<h2 id="In_this_module" name="In_this_module">このモジュール</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">CSS の値と単位</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>