()セレクタの新しい可能性 – 『of S』構文を使った精密な要素選択方法

Posted on by

CSSの:nth-child()疑似クラスは、親要素の中で要素の位置に基づいて選択する強力なツールです。
この機能により、特定の位置にある要素だけにスタイルを適用したり、
特定の要素をターゲットにすることが可能になります。
しかし、近年追加された「of S」構文は、この機能をさらに強化し、
特定の要素グループの中からさらに精密に選択することを可能にしました。

この記事では、まず:nth-child()セレクタの基本的な使い方を復習し、
その後で「of S」構文を使った応用方法について詳しく解説します。
これにより、CSSをより効率的に、かつ柔軟に書くためのスキルを身につけることができます。

()セレクタの基本

まず、:nth-child()セレクタは、指定された親要素内の子要素の順序に基づいて要素を選択します。
例えば、以下のようなHTMLがあったとします。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

ここで、ul内の2番目のli要素にスタイルを適用したい場合、以下のようにCSSを書きます。

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

この場合、2番目のli要素、すなわち「Item 2」に対して赤色が適用されます。
:nth-child()の括弧内には、1から始まる整数、または数式（例えば2n+1）を指定することができます。

「of S」構文の導入

次に、:nth-child()セレクタの「of S」構文に移ります。
この新しい構文は、特定の要素セットの中から特定の順番にある要素を選択するためのものです。
具体的には、「of S」構文を使用することで、
兄弟要素の中でも特定のタイプの要素のみを対象にすることができます。

例えば、以下のようなHTMLがあったとします。

<div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
  <p>Paragraph 2</p>
  <span>Span 2</span>
  <p>Paragraph 3</p>
</div>

通常の:nth-child()を使って3番目のp要素を選択しようとすると、p:nth-child(3)は何も選択しません。なぜなら、p:nth-child(3)はdiv内の全ての子要素を数えるからです。
しかし、「of S」構文を使うと、特定の要素（この場合はpタグ）のみをカウントして指定できます。

p:nth-child(2 of p) {
  color: blue;
}

この例では、div内のp要素のうち2番目のもの（「Paragraph 2」）が青色に変わります。
これは、pタグのみを対象に順序を数え、「of p」でその要素セットを絞り込んでいるためです。

「of S」構文の応用

この新しい構文を使うことで、より複雑なデザインにも対応できるようになります。
たとえば、リストの中で特定の項目だけを強調したい場合、
あるいは異なるタグが混在する中で特定のタグにのみスタイルを適用したい場合に非常に便利です。

以下に、複雑なレイアウトでの使用例を紹介します。

<div class="container">
  <h2>Title 1</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <h2>Title 2</h2>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <h2>Title 3</h2>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p>
</div>

このHTMLで、h2とpが交互に並んでいます。
このとき、各タイトルの後に続く最初のp要素だけに特別なスタイルを適用したい場合、
「of S」構文が役立ちます。

p:nth-child(1 of p) {
  font-weight: bold;
}

これにより、各h2の直後の最初のp要素（「Paragraph 1」、「Paragraph 3」、「Paragraph 5」）が
太字になります。
このように、特定のパターンやレイアウトに応じたスタイルを簡潔に実装できます。

「of S」構文と他のセレクタの組み合わせ

「of S」構文は、他の疑似クラスやセレクタと組み合わせて使用することも可能です。
これにより、さらに柔軟で強力なスタイルの適用が可能になります。

例えば、特定の親要素内で特定のクラスを持つ要素に対して「of S」構文を適用することができます。

<div class="container">
  <p class="highlight">Highlighted 1</p>
  <p>Paragraph 2</p>
  <p class="highlight">Highlighted 2</p>
  <p>Paragraph 4</p>
  <p class="highlight">Highlighted 3</p>
</div>
p.highlight:nth-child(2 of .highlight) {
  color: green;
}

このCSSは、highlightクラスを持つp要素の中で2番目のもの（「Highlighted 2」）を緑色にします。
これにより、特定のクラスや属性を持つ要素に限定したスタイルの適用ができます。

実際のケーススタディ

最後に、「of S」構文を使用した実際のケーススタディを紹介します。
あるプロジェクトで、商品のリストがあり、
それぞれのカテゴリーに対して異なるスタイルを適用する必要があったとします。

<div class="product-list">
  <h3>Category 1</h3>
  <div class="product">Product A</div>
  <div class="product">Product B</div>
  <h3>Category 2</h3>
  <div class="product">Product C</div>
  <div class="product">Product D</div>
</div>

各カテゴリーの最初の商品に特別なスタイルを適用したい場合、以下のように「of S」構文を使用します。

.product:nth-child(1 of .product) {
  border: 2px solid red;
}

これにより、各カテゴリーの最初の商品（「Product A」と「Product C」）に赤い枠線が適用されます。

まとめ

:nth-child()セレクタの「of S」構文は、CSSでの要素選択をさらに精密にし、
複雑なレイアウトにも対応できる強力なツールです。
これを活用することで、特定の要素グループに対して効率的にスタイルを適用できるようになります。
今後のプロジェクトで、この新しい構文を使って、より洗練されたデザインを実現してください。