【基本から応用まで】CSSセレクターの種類や指定方法

CSS（Cascading Style Sheets）はウェブページの見た目を装飾するための言語です。そしてCSSセレクターとは、HTML要素にスタイルを適用する際に使われる部分です。
多様なセレクターを理解することで、class名をたくさんつけなくてもウェブページのデザインを自由自在に変えることができます。
今回は基本のCSSセレクター、使えると便利なCSSセレクター、その他のCSSセレクターを紹介します。

CSSセレクターとは

CSSセレクターは、HTML文書内の特定の要素を選択するためのパターンです。
セレクターは、要素のタイプ、クラス、ID、またはその他の属性などの特性に基づいて要素を識別します。例えば、pセレクターはHTML文書内の全ての<p>要素を選択し、#headerセレクターはid=”header”という属性を持つ要素を選択します。
セレクターを使用することで、特定の要素にスタイルを適用したり、要素の配置や装飾を制御したりすることができます。CSSセレクターは、ウェブデザインの基本的な要素であり、ウェブページを使いやすくするために重要な役割を果たします。

基本のCSSセレクター

これだけセレクターを扱うことができればCSSを編集できます。
普段からCSSに触れている方は飛ばし読みしてください。

• 要素セレクター
  指定されたHTML要素にスタイルを適用します。

  p {
      color: red; /* <p>タグにcolor: red;を適用 */
  }

• クラスセレクター
  指定されたクラス名を持つ要素にスタイルを適用します。

  .my-class {
      font-size: 20px; /* <要素 class="my-class">にfont-size: 20px;を適用 */
  }

• IDセレクター
  指定されたID属性を持つ要素にスタイルを適用します。

  #my-id {
      background-color: yellow; /* <要素 id="my-id">にbackground-color: yellow;を適用 */
  }

• 子孫セレクター
  指定された要素の子孫にスタイルを適用します。

  div p {
      color: red;
  }

  <!-- 上記CSSでは、divタグの子要素のpタグのみcolor: red;が適用される -->
  <h2>h2タグ</h2>
  <p>テキストテキストテキスト</p>
  <div>
      <h3>h3タグ</h3>
      <p>テキスト</p> <!-- color:red;が適用される -->
      <span>スパン</span>
  </div>
  

• 複数セレクター
  カンマで区切った要素にそれぞれ同じスタイルを適用します。

  div p,
  div span {
      color: red;
  }

  <!-- 上記CSSでは、divタグの子要素のpタグとspanタグにcolor: red;が適用される -->
  <h2>h2タグ</h2>
  <p>テキストテキストテキスト</p>
  <div>
      <h3>h3タグ</h3>
      <p>テキスト</p> <!-- color:red;が適用される -->
      <span>スパン</span> <!-- color:red;が適用される -->
  </div>
  

• リンクセレクター
  リンクで使用するセレクターです。
  未訪問のリンク・訪問済みのリンク・ホバー状態のリンク・クリック状態のリンクをまとめてご紹介します。

  /* 未訪問のリンク */
  a:link { 
      color: blue;
  } 
  
  /* 訪問済みのリンク */
  a:visited {
      color: purple;
  }
  
  /* ホバー状態のリンク */
  a:hover {
      color: red;
  }
  
  /* クリック状態のリンク */
  a:active {
      color: yellow;
  }

  ホバー状態のリンクはホバーエフェクト（例：リンクの写真にマウスカーソルを合わせたら写真が少し大きくなる）を作る際に必要なので、もしご存じない方は覚えておくといいでしょう。

• 属性セレクター
  CSSの属性セレクターは、HTML要素に付与された属性の値を指定して、その要素をスタイル付けするための方法です。特定の属性や値を持つ要素を選択し、スタイルを適用することができます。

  /* name 属性を持つaタグ */
  a[name] { 
      color: red;
  } 
  
  /* href が "https://example.ie" と一致するaタグ */
  a[href="https://example.ie"] {
      color: red;
  }
  
  /* href が "tel" から始まるaタグ */
  a[href^="tel"] {
      color: red;
  }
  
  /* href に "example" を含むaタグ */
  a[href*="example"] {
      color: red;
  }
  
  /* href が ".jp" で終わるaタグ */
  a[href$=".jp"] {
      color: red;
  }

  ほかにも属性セレクターはいくらかありますが、興味のある方は検索してみてください。

CSSセレクターの疑似クラス、nth-childなど

今回は代表的なものと使えたら便利なもののみご紹介します。

よく使うツリー構造

:nth-child()

• 兄弟要素の中で一番最初/最後の要素を指定

  /* 最初の要素を指定 */
  div p:first-child {
      color: red;
  }
  
  /* 最後の要素を指定 */
  div p:last-child {
      color: red;
  }

• 兄弟要素の中で指定した位置を指定

  div p:nth-child(2) {
      color: red;
  }

  交互に色が変わるデザインなどは:nth-childを活用して作られていることが多いです。

  • odd…奇数番目の要素に適用
  • even…偶数番目の要素に適用
  • An…Aの倍数番目の要素に適用（3nなら3の倍数番目の要素）

  そのほかにも細かいパターンはありますがひとまずよく使うものだけ知っておきましょう。

  div p:nth-child(2n) {
      color: red;
  }

  以下、カッコがついている:nth-は上記と同じように要素を指定することができます。

• 兄弟要素の中で指定した位置を指定（後ろから前にカウント）

  div p:nth-last-child(2) {
      color: red;
  }

:nth-of-type()

• 兄弟要素の指定した要素の中で指定した位置を指定

  div p:nth-of-type(2) {
      color: red;
  }

• 兄弟要素の指定した要素の中で指定した位置を指定（後ろから前にカウント）

  div p:nth-last-of-type {
      color: red;
  }

• 兄弟要素の指定した要素の最初/最後の要素を指定

  /* 最初の要素 */
  div p:nth-first-of-type {
      color: red;
  }
  
  /* 最後の要素 */
  div p:nth-first-of-type {
      color: red;
  }

• 同じタグの兄弟要素がない要素を指定

  div p:only-of-type {
      color: red;
  }

:nth-child()と:nth-of-type()の違い

CSSの:nth-child()と:nth-of-type()は、両方とも特定の要素を選択するための方法ですが、微妙な違いがあります。

1. nth-child():
   • nth-child()は、親要素の中で、特定の位置にあるすべての子要素を選択します。
   • 例えば、親要素の中で3番目の子要素を選択したい場合、:nth-child(3)と書きます。
2. nth-of-type():
   • nth-of-type()は、指定されたタイプの要素の中で、特定の位置にある要素を選択します。
   • 例えば、div要素の中で3番目の要素を選択したい場合、div:nth-of-type(3)と書きます。

例えば、以下のHTMLがあるとします。

<div>
<p>pタグ 1</p>
<p>pタグ 2</p>
<span>spanタグ 1</span>
<p>pタグ 3</p>
<span>spanタグ 2</span>
</div>

それぞれの要素に対して、次のようなCSSが適用されるとします。

p:nth-child(4) {
	color: red;
}

p:nth-of-type(3) {
	font-weight: bold;
}

• p:nth-child(4)は、親要素<div>の中で4番目の子要素が<p>要素であるため、4番目の<p>要素（”pタグ 4″）に赤い色が適用されます。
• p:nth-of-type(3)は、同じ種類（<p>）の兄弟要素の中で3番目の<p>要素（”pタグ 3″）に太字のフォントが適用されます。

まとめると、nth-child()は親要素内のすべての子要素の位置を基準に選択し、nth-of-type()は指定されたタイプの要素内での位置を基準に要素を選択します。

使えると便利なCSSセレクター

ここからは、使えると便利なCSSセレクターをご紹介します。

直下の子要素

要素同士の間にいれていた半角スペースのところに「>」を追加することで、1つ下の階層の子要素だけにCSSを適用できます。
孫要素（2つ下の階層にある）は対象外になります。

div>p {
    color: red;
}

<!-- 上記CSSでは、divタグの子要素のpタグとspanタグにcolor: red;が適用される -->
<h2>h2タグ</h2>
<p>テキストテキストテキスト</p>
<div>
    <h3>h3タグ</h3>
    <p>テキスト</p> <!-- color:red;が適用される -->
    <span>スパン</span> <!-- color:red;が適用される -->
</div>

隣の要素

要素同士の間にいれていた半角スペースのところに「+」を追加することで、同じ階層にあって指定した要素のすぐ後に出てきた1つの要素だけにCSSを適用できます。

h3+p {
    color: red;
}

<!-- 上記CSSでは、divタグの子要素のpタグとspanタグにcolor: red;が適用される -->
<h2>h2タグ</h2>
<p>テキストテキストテキスト</p>
<div>
    <h3>h3タグ</h3>
    <p>テキスト</p> <!-- color:red;が適用される -->
    <span>スパン</span> <!-- color:red;が適用される -->
</div>

兄弟要素

今度は「〜」を要素同士の間に追加することで、指定した要素より後にでてくる同じ階層の要素が対象となります

h3~p {
    color: red;
}

<!-- 上記CSSでは、divタグの子要素のpタグとspanタグにcolor: red;が適用される -->
<h2>h2タグ</h2>
<p>テキストテキストテキスト</p>
<div>
    <h3>h3タグ</h3>
    <p>テキスト</p> <!-- color:red;が適用される -->
    <span>スパン</span> <!-- color:red;が適用される -->
</div>

全称セレクター（*）

ウェブページには見出しや段落、画像などさまざまな要素があります。全称セレクターは、全ての要素に同じスタイルを適用したい場合に役立ちます。

* {
    color: red; /* 全ての要素にcolor: red;を適用 */
}

否定セレクター

div p:not(:last-child) {
    color: red; /* 最後にあるpタグ以外のpタグにcolor: red;を適用 */
}

まとめ

CSSで手前の要素を選択する方法は残念ながらありません。しかし、これらのセレクターを学ぶことで、ウェブデザインの幅が広がります。狙った要素にスタイルを適用したり、レイアウトを制御したりすることができます。
便利なCSSセレクターを学んで、より魅力的で使いやすいウェブサイトを作りましょう！