<article lang="ja"><header><h1>CSS セレクター</h1></header><div><ul>
    
    <li><a><span> Overview: CSS の構成要素</span></a></li>
    <li><a><span> 次のページ  </span></a></li>
</ul>
<p><a>CSS</a>では、セレクター (selector) を使って装飾したい <a>HTML</a> 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。</p>
<figure><table>
  <tbody>
    <tr>
      <th scope="row">前提条件:</th>
      <td>
        <a>基本的なソフトウェアがインストールされていること</a>, basic knowledge of
        <a>ファイルの扱い</a>, HTML basics (study
        <a>HTML 入門</a>)、および CSS がどのように動作するかという考え（<a>CSS の第一歩</a>）に関する基本的な知識を得ている。
      </td>
    </tr>
    <tr>
      <th scope="row">目的:</th>
      <td>CSS セレクターがどのように機能するかを学ぶ。</td>
    </tr>
  </tbody>
</table></figure></div><section aria-labelledby="セレクターとは"><h2><a>セレクターとは</a></h2><div><p>CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS セレクターは要素やその他の用語の組み合わせで、どの HTML 要素を選択するかブラウザーに伝えます。選択された要素には CSS プロパティ値 (property value) が適用されます。セレクターによって選択された要素を、<em>選択対象</em> (<em>subject of the selector</em>) と呼びます。</p>
<p>
  <img alt="多少のコードで、 h1 が強調されている。" width="471" height="218">
</p>
<p>他にもいろいろな記事で、様々なセレクターに出会い、様々な方法で文書を対象とするセレクターがあることを知ることができたと思います。例えば、<code>h1</code> は HTML 要素で選択する一方 <code>.special</code> はクラスで選択します。</p>
<p>セレクターは CSS セレクター仕様で定義されます。ほとんどのセレクターは <a>Level 3 Selectors specification</a> や <a>Level 4 Selectors specification</a> で定義されています。CSS の他の部分と同様に、セレクターが機能するにはブラウザーの対応が必要ですが、どちらも成熟した仕様なのでブラウザーの対応も充実しています。</p></div></section><section aria-labelledby="セレクターリスト"><h2><a>セレクターリスト</a></h2><div><p>同じ CSS を使用する場合は、それぞれのセレクターを <em>セレクターリスト</em> (<em>selector list</em>) にまとめてルールを適用できます。たとえば、<code>h1</code> と <code>.special</code> の CSS が同じ場合、2 つの個別のルールとして記述できます。</p>
<div><div><span>css</span></div><pre data-signature="+XUnnLhcDhE837UV1H7ETZX9gU7Us/2xGkY58LoimZ8="><code>h1 {
  color: blue;
}

.special {
  color: blue;
}
</code></pre></div>
<p>カンマ区切りでセレクターリストにもできます。</p>
<div><div><span>css</span></div><pre data-signature="2Z9ZEWsDmt7r/hj/zRYplE0G3hGtoyqQ3//vlYYRuMw="><code>h1, .special {
  color: blue;
}
</code></pre></div>
<p>カンマの前後にホワイトスペースを入れることもできます。改行したほうが読みやすいかもしれません。</p>
<div><div><span>css</span></div><pre data-signature="va/dM26DVMcIlJ2p5pUIJ2TWWvtdxkC4LuhKa+1RzpI="><code>h1,
.special {
  color: blue;
}
</code></pre></div>
<p>以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。</p><iframe width="100%" height="1150"></iframe>
<p>この方法でセレクターをまとめている場合、間違った文法で書かれたセレクターを 1 つでも含んでいるとルール全体が無視されます。</p>
<p>次の例では、不正なクラスセレクターのルールは無視され、 <code>h1</code> がスタイル設定されます。</p>
<div><div><span>css</span></div><pre data-signature="1jTuI7atM0UMzyd5Lh6HWt6c+s7p0dIfKhDhcqIFLvs="><code>h1 {
  color: blue;
}

..special {
  color: blue;
}
</code></pre></div>
<p>しかし、結合された場合、 <code>h1</code> もクラスもスタイル設定されず、ルール全体が不正なものとみなされます。</p>
<div><div><span>css</span></div><pre data-signature="X+J9WeJB+ptgY5CUejBrPVAPrYHbeRqp+D8x2cI7f6k="><code>h1, ..special {
  color: blue;
}
</code></pre></div></div></section><section aria-labelledby="セレクターの種類"><h2><a>セレクターの種類</a></h2><div><p>セレクターにはいくつかのグループ分けがあり、どの種類のセレクターが必要かを知ることは、その仕事に正しいツールを探すのに役立ちます。この記事の下位の記事では、異なるセレクターのグループについてより詳しく見ていきます。</p></div></section><section aria-labelledby="要素型、クラス、id_セレクター"><h3><a>要素型、クラス、ID セレクター</a></h3><div><p><a><code><h1></h1></code></a> のような HTML 要素を選択するセレクターがこのグループに属します。</p>
<div><div><span>css</span></div><pre data-signature="2WvrHyTNHNh0UVhMs6z3eezqV45nWwoe4mIieAu1KA8="><code>h1 {
}
</code></pre></div>
<p>クラスセレクターは、 <a><code>class</code></a> 属性に特定の値が示されている要素を対象とします。</p>
<div><div><span>css</span></div><pre data-signature="cA3h3bdPzpTQF1Cm/IQn5wQGjIUJSK44y3plahWbonQ="><code>.box {
}
</code></pre></div>
<p>ID セレクターは、 <a><code>id</code></a> 属性に特定の値がある要素を対象とします。</p>
<div><div><span>css</span></div><pre data-signature="kCdv9jcwtMZxGQY1jtpeOIkz6h0WQ2siAi3/Ovc77Xg="><code>#unique {
}
</code></pre></div></div></section><section aria-labelledby="属性セレクター"><h3><a>属性セレクター</a></h3><div><p>このセレクターのグループは、要素上の特定の属性の存在に基づいて要素を選択するさまざまな方法を提供します。</p>
<div><div><span>css</span></div><pre data-signature="41Vbc1dOUPuhrRJ55ENxTjZ0JAbY7zv8o/AJ4aWDOEk="><code>a[title] {
}
</code></pre></div>
<p>特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。</p>
<div><div><span>css</span></div><pre data-signature="tZY75pR9nsi8dcNuR66C3ANljqCnfAF4orYEtiWzD74="><code>a[href="https://example.com"]
{
}
</code></pre></div></div></section><section aria-labelledby="擬似クラスおよび擬似要素"><h3><a>擬似クラスおよび擬似要素</a></h3><div><p>このセレクターのグループには、要素の特定の状態をスタイル設定する擬似クラスが含まれます。例えば、<code>:hover</code>擬似クラスは、マウスポインターが上に置かれたときだけ要素を選択します。</p>
<div><div><span>css</span></div><pre data-signature="lD77lYINHl7GAXeBsxvf2wpBS/0tL0JYuwP58JcKnkE="><code>a:hover {
}
</code></pre></div>
<p>擬似要素 (pseudo-element) 、つまり要素自体ではなく要素の特定の部分を選択するセレクターもあります。たとえば、<code>::first-line</code> は要素（以下の例では <code><p></p></code>）内の最初の行をまるで <code><span></span></code> で囲んでスタイル設定したかのように動作します。</p>
<div><div><span>css</span></div><pre data-signature="vUpI/gZljOVlOm5X/ZdUpShMTVJ4QGqV87jdScIaBPk="><code>p::first-line {
}
</code></pre></div></div></section><section aria-labelledby="結合子"><h3><a>結合子</a></h3><div><p>最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子（子コンビネーター、child combinator）(<code>></code>) によって <code><article></article></code> 要素の直接の子である段落を選択します。</p>
<div><div><span>css</span></div><pre data-signature="mME3Xk9KXMPugeUeVeGpOeiPUODooh+4dnOViTA3ypE="><code>article > p {
}
</code></pre></div></div></section><section aria-labelledby="まとめ"><h2><a>まとめ</a></h2><div><p>この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、<a>要素型、クラス、ID セレクター</a>から見ていくこともできます。</p>
<p>セレクターの完全なリストについては、 <a>CSS セレクターリファレンス</a>を参照してください。</p><ul>
    
    <li><a><span> Overview: CSS の構成要素</span></a></li>
    <li><a><span> 次のページ  </span></a></li>
</ul></div></section></article>

JavaScript コードを実行すること

ウェブページのコンテンツを生成すること

複数のセレクターに同じスタイルを適用できる

スタイルを個別に定義する必要がある

要素の特定の状態をスタイル設定するセレクター

要素の属性を選択するセレクター

要素の特定の部分を選択するセレクター