CSSセレクタ「>」：ナビゲーションバーや見出し装飾など、具体的な使い方を解説

2024-04-02

CSSセレクタにおける「>」(大なり記号)の意味

つまり、ある要素の子要素のうち、その要素と直接隣接している要素のみにスタイルを適用することができます。

例:

<div id="parent">
  <p>直接の子要素</p>
  <div>
    <p>孫要素</p>
  </div>
</div>

#parent > p {
  color: red;
}

上記のコードでは、#parent要素の直接の子要素であるp要素のみが赤色になります。

孫要素であるp要素にはスタイルが適用されません。

他のセレクタとの比較

(空白): 子孫要素すべてを選択
. (ピリオド): クラス名を持つ要素を選択
# (シャープ): IDを持つ要素を選択

<div id="parent">
  <p class="child">直接の子要素</p>
  <div>
    <p class="child">孫要素</p>
  </div>
</div>

#parent p {
  /* 親要素の子要素すべてが赤色になる */
  color: red;
}

#parent .child {
  /* 親要素の子要素のうち、クラス名 "child" を持つ要素のみが青色になる */
  color: blue;
}

#parent > p {
  /* 親要素の直接の子要素のみが緑色になる */
  color: green;
}

応用例

ナビゲーションバーのメイン項目のみを強調したい場合
コンテンツエリア内の見出しのみを装飾したい場合
特定の要素の直後に配置される要素のみをスタイルを変更したい場合

注意点

複合セレクタと組み合わせて使用することも可能
隣接する兄弟要素を選択したい場合は、「+」(プラス記号)セレクタを使用
nth-child() などの子要素を順番で選択するセレクタと併用不可

<ul id="navigation">
  <li><a href="#">メイン項目1</a></li>
  <li><a href="#">メイン項目2</a></li>
  <li><a href="#">メイン項目3</a></li>
  <li class="sub-item"><a href="#">サブ項目</a></li>
</ul>

#navigation > li {
  /* 全てのリスト項目にスタイルを適用 */
  display: inline-block;
  padding: 10px;
}

#navigation > li:hover {
  /* 全てのリスト項目のホバー時のスタイル */
  background-color: #ccc;
}

#navigation > li.sub-item {
  /* サブ項目のみスタイルを変更 */
  background-color: #ddd;
}

#navigation > li.sub-item:hover {
  /* サブ項目のホバー時のスタイル */
  background-color: #eee;
}

<div id="content">
  <h2>見出し1</h2>
  <p>本文</p>
  <h3>見出し2</h3>
  <p>本文</p>
</div>

#content > h2 {
  /* コンテンツエリア内の見出し1のみを装飾 */
  color: red;
  font-size: 18px;
}

#content > h3 {
  /* コンテンツエリア内の見出し2のみを装飾 */
  color: blue;
  font-size: 16px;
}

<div id="container">
  <p>段落1</p>
  <img src="image.jpg" alt="画像">
  <p>段落2</p>
</div>

#container > p:first-of-type {
  /* 最初の段落のみを強調 */
  font-weight: bold;
}

#container > img + p {
  /* 画像の直後に配置される段落のみを強調 */
  text-align: center;
}

これらのサンプルコードはあくまでも例です。実際の使用例に合わせて、セレクタやスタイルを調整してください。

CSSセレクタの「>」(大なり記号)の代替方法

子孫セレクタ ()

#parent p {
  /* 親要素の子孫要素すべてを選択 */
  color: red;
}

隣接兄弟セレクタ (+)

#parent p + p {
  /* 親要素の直接の子要素である p 要素の直後に配置される p 要素のみを選択 */
  color: red;
}

nth-child() セレクタ

#parent p:nth-child(1) {
  /* 親要素の最初の子要素である p 要素のみを選択 */
  color: red;
}

#parent p:nth-of-type(1) {
  /* 親要素の最初の子要素のうち、p 要素のみを選択 */
  color: red;
}

JavaScript

const parentElement = document.getElementById('parent');
const firstChildElement = parentElement.firstElementChild;

firstChildElement.style.color = 'red';

これらの方法は、それぞれ異なる挙動をするため、目的に合った方法を選択する必要があります。

「>」(大なり記号)セレクタを使用するメリットとデメリット

メリット: