CSSセレクタでスマートにコーディング！「A または B かつ C」の書き方まとめ

2024-06-16

CSS セレクタ "(A または B) かつ C" の詳細解説

このCSSセレクタは、A または B の要素であり、かつ C の条件を満たす要素を選択します。"かつ" は論理積を表し、すべての条件を満たす要素だけが対象となります。

構文

A, B.C {
  /* スタイル */
}

例

以下の例では、p 要素または h1 要素で、かつ .red クラスを持つ要素にスタイルが適用されます。

p, h1.red {
  color: red;
  font-weight: bold;
}

詳細

A または B: これは論理和を表し、A または B のどちらかの条件を満たす要素を選択します。
.C:** これはクラスセレクタで、.red クラスを持つ要素を選択します。
組み合わせることで、より複雑な条件を指定できます。例えば、p.red, h1.blue とすると、p 要素で .red クラスを持つ要素と、h1 要素で .blue クラスを持つ要素を選択します。

補足

このセレクタは、ネストされた要素にも適用されます。例えば、div p.red とすると、div 要素内にあり、かつ .red クラスを持つ p 要素が対象となります。
擬似クラスや擬似要素も組み合わせることができます。例えば、a:hover.red とすると、マウスカーソルがホバリングしている a 要素で、かつ .red クラスを持つ要素が対象となります。

上記以外にも、様々なCSSセレクタが存在します。詳細は、MDN Web Docsなどのリファレンスを参照してください。
CSSは奥深い言語なので、最初は簡単なセレクタから始めて、徐々に複雑なセレクタを学んでいくことをおすすめします。

例1：要素の種類とクラス

p.red, h1.blue {
  color: #f00; /* 赤色 */
  font-weight: bold;
}

このコードは、p 要素で .red クラスを持つ要素と、h1 要素で .blue クラスを持つ要素に、赤色と太字のスタイルを適用します。

例2：要素の子孫要素と属性

div ul li.active[data-status="completed"] {
  text-decoration: line-through;
}

このコードは、div 要素の子孫要素である ul 要素の中の li 要素で、.active クラスを持ち、かつ data-status 属性の値が "completed" である要素に、取り消し線のスタイルを適用します。

例3：擬似クラスと擬似要素

a:hover.red::after {
  content: " (詳細)";
  background-color: #ccc;
  padding: 5px;
}

このコードは、マウスカーソルがホバリングしている a 要素で .red クラスを持つ要素の直後に、" (詳細)" というテキストとグレー色の背景を持つ擬似要素を挿入します。

例4：複数の子孫要素

div .section:nth-child(odd) h2 {
  background-color: #eee;
}

このコードは、div 要素の子孫要素である .section クラスを持つ要素のうち、奇数番目の要素 (nth-child(odd)) 内の h2 要素に、グレー色の背景を適用します。

例5：兄弟要素

li + li.active {
  font-weight: bold;
}

このコードは、li 要素の直後に .active クラスを持つ li 要素に、太字のスタイルを適用します。

CSS セレクタ "(A または B) かつ C" を表現するその他の方法

擬似クラス :is() を使用する

p, h1:is(.red, .blue) {
  /* スタイル */
}

この例では、擬似クラス :is() を使用して、p 要素または h1 要素のうち、.red クラス または .blue クラスの いずれか を持つ要素を選択します。

属性セレクタを組み合わせる

p[class*="red blue"] {
  /* スタイル */
}

この例では、属性セレクタ [class*="red blue"] を使用して、class 属性の値に "red" または "blue" を含む p 要素を選択します。

JavaScript を使用する

const elements = document.querySelectorAll('p, h1');
for (const element of elements) {
  if (element.classList.contains('red') || element.classList.contains('blue')) {
    // スタイルを適用
  }
}