:first-of-typeセレクタで要素を選択する方法

2024-04-02

CSSのnot:first-childセレクタの使い方

:not:first-childセレクタは、親要素の最初の子要素ではないすべての要素を選択するために使用されます。これは、特定の条件を満たす要素を除外したい場合に役立ちます。

例

以下の例では、div要素の最初の子要素以外はすべて青色の背景色に設定しています。

div {
  background-color: white;
}

div:not(:first-child) {
  background-color: blue;
}

詳細

:not:first-childセレクタは、単独で使用することも、他のセレクタと組み合わせて使用することもできます。

単独で使用する場合

:not:first-childセレクタを単独で使用すると、親要素の最初の子要素ではないすべての要素が選択されます。

<div>
  <p>最初の要素</p>
  <p>2番目の要素</p>
  <p>3番目の要素</p>
</div>

p:not(:first-child) {
  color: red;
}

この例では、p要素の最初の子要素は赤色で表示され、それ以外の要素は黒色で表示されます。

他のセレクタと組み合わせて使用する場合

:not:first-childセレクタを他のセレクタと組み合わせて使用すると、より複雑な条件を指定することができます。

<div>
  <p class="first">最初の要素</p>
  <p class="second">2番目の要素</p>
  <p class="third">3番目の要素</p>
</div>

p.second:not(:first-child) {
  color: green;
}

この例では、p要素でクラス名がsecondであり、かつ親要素の最初の子要素ではない要素は緑色で表示されます。

補足

:not:first-childセレクタは、IE8以前のブラウザではサポートされていません。

<div>
  <p>最初の要素</p>
  <p>2番目の要素</p>
  <p>3番目の要素</p>
</div>

p:not(:first-child) {
  color: blue;
}

<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <li>4番目の要素</li>
</ul>

li:nth-child(even):not(:first-child) {
  color: red;
}

<div>
  <p class="first">最初の要素</p>
  <p class="second">2番目の要素</p>
  <p class="third">3番目の要素</p>
</div>

p.second:not(:first-child) {
  color: green;
}

<div>
  <h1>タイトル</h1>
  <p>最初の要素</p>
  <p>2番目の要素</p>
  <p>3番目の要素</p>
</div>

div > *:not(:first-child) {
  background-color: gray;
}

上記のサンプルコードは、あくまでも参考例です。ご自身の目的に合わせて、コードを編集してください。

nth-child()セレクタは、親要素の子要素の順番に基づいて要素を選択することができます。

<div>
  <p>最初の要素</p>
  <p>2番目の要素</p>
  <p>3番目の要素</p>
</div>

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

:first-of-typeセレクタは、親要素の最初の子要素のうち、指定された型の要素を選択します。

<div>
  <h1>タイトル</h1>
  <p>最初の要素</p>
  <p>2番目の要素</p>
  <p>3番目の要素</p>
</div>

div > p:first-of-type {
  background-color: gray;
}

JavaScriptを使用すると、より複雑な条件に基づいて要素を選択することができます。

<div>
  <p>最初の要素</p>
  <p>2番目の要素</p>
  <p>3番目の要素</p>
</div>

const elements = document.querySelectorAll('p');

for (let i = 1; i < elements.length; i++) {
  elements[i].style.color = 'blue';
}

シンプルな方法で最初の要素を除外したい場合は、:not:first-childセレクタを使用するのがおすすめです。
より複雑な条件に基づいて要素を除外したい場合は、nth-child()セレクタ、:first-of-typeセレクタ、またはJavaScriptを使用する必要があります。

css css-selectors