CSSとJavaScriptで子要素数を検出する方法まとめ

2024-04-02

CSSで要素の子要素の数を検出する方法

擬似クラスによる子要素数の検出

以下の擬似クラスを使うことで、子要素の数を条件にスタイルを設定できます。

nth-child(): 子要素の順番を指定してスタイルを設定できます。
first-child: 最初の要素にのみスタイルを設定できます。

これらの擬似クラスを組み合わせることで、子要素の数に応じて異なるスタイルを設定することができます。

例:

.parent {
  /* 子要素が1つのみの場合 */
  & > :only-child {
    color: red;
  }

  /* 子要素が2つ以上の場合 */
  & > :nth-child(2) {
    color: blue;
  }
}

この例では、.parent要素の子要素が1つのみの場合、その要素を赤色に、2つ以上の場合は2番目の要素を青色にしています。

JavaScriptによる子要素数の検出

より複雑な条件で子要素数を取得したい場合は、JavaScriptと組み合わせて処理する必要があります。

<div class="parent">
  <div>子要素1</div>
  <div>子要素2</div>
  <div>子要素3</div>
</div>

const parentElement = document.querySelector('.parent');
const childCount = parentElement.children.length;

// 子要素の数に応じて処理を行う
if (childCount === 1) {
  // 子要素が1つの場合の処理
} else if (childCount === 2) {
  // 子要素が2つの場合の処理
} else {
  // 子要素が3つ以上の場合の処理
}

この例では、querySelectorを使って.parent要素を取得し、childrenプロパティを使って子要素の数childCountを取得しています。その後、childCountの値に応じて処理を行っています。

CSSで直接子要素数を取得することはできませんが、擬似クラスやJavaScriptと組み合わせることで、間接的に取得し、スタイルを適用することができます。

HTML:

<div class="parent">
  <div class="child">子要素1</div>
  <div class="child">子要素2</div>
  <div class="child">子要素3</div>
</div>

CSS:

.parent {
  /* 子要素が1つのみの場合 */
  & > :only-child {
    color: red;
  }

  /* 子要素が2つ以上の場合 */
  & > :nth-child(2) {
    color: blue;
  }
}

/* JavaScriptによる子要素数の取得 */
const parentElement = document.querySelector('.parent');
const childCount = parentElement.children.length;

// 子要素の数に応じて処理を行う
if (childCount === 1) {
  console.log('子要素は1つです');
} else if (childCount === 2) {
  console.log('子要素は2つです');
} else {
  console.log('子要素は3つ以上です');
}

このサンプルコードを実行すると、以下の結果が表示されます。

子要素は3つ以上です

その他のサンプルコード:

子要素の数を表示する:

<div class="parent">
  <div class="child">子要素1</div>
  <div class="child">子要素2</div>
  <div class="child">子要素3</div>
</div>

<span id="child-count"></span>

const parentElement = document.querySelector('.parent');
const childCount = parentElement.children.length;

const childCountElement = document.getElementById('child-count');
childCountElement.textContent = `子要素の数: ${childCount}`;

子要素の数に応じてスタイルを変更する:

<div class="parent">
  <div class="child">子要素1</div>
  <div class="child">子要素2</div>
  <div class="child">子要素3</div>
</div>

.parent {
  /* 子要素が1つのみの場合 */
  & > :only-child {
    color: red;
  }

  /* 子要素が2つ以上の場合 */
  & > :nth-child(2) {
    color: blue;
  }

  /* 子要素が3つ以上の場合 */
  & > :nth-child(3) {
    color: green;
  }
}

このサンプルコードを実行すると、子要素1は赤色、子要素2は青色、子要素3は緑色に表示されます。

これらのサンプルコードを参考に、ニーズに合わせて子要素数を検出 and 処理を行ってください。

子要素数を取得するその他の方法

JavaScript

querySelectorAll() メソッドを使って、子要素のリストを取得し、そのリストの長さを取得する方法。

const parentElement = document.querySelector('.parent');
const childElements = parentElement.querySelectorAll('.child');
const childCount = childElements.length;

const parentElement = document.querySelector('.parent');
const childCount = parentElement.children.length;

jQuery

children().length プロパティを使って、子要素数を取得する方法。

const parentElement = $('.parent');
const childCount = parentElement.children().length;

CSS counters

counter-increment と counter-reset プロパティを使って、子要素数をカウンターで管理する方法。

.parent {
  counter-reset: child-count;
}

.child {
  counter-increment: child-count;
}

/* 子要素の数に応じてスタイルを設定 */
.child::before {
  content: "子要素 " counter(child-count);
}

これらの方法の中から、ニーズに合った方法を選択してください。

css css-selectors