CSS コードをよりスマートに記述する ':is()' セレクター

基本的な構文

:is(セレクター1, セレクター2, ..., セレクターn) {
  /* ここにスタイル記述 */
}

上記のように、:is() の後にカッコで囲み、カンマ区切りで複数のセレクターを指定します。カッコ内のセレクターは、要素名、クラス名、ID、擬似クラス、属性セレクターなど、あらゆる種類のセレクターを使用できます。

例：見出し要素にスタイルを適用

h1, h2, h3 {
  color: blue;
  font-weight: bold;
}

上記のコードを :is() を使って以下のように書き換えることができます。

:is(h1, h2, h3) {
  color: blue;
  font-weight: bold;
}

利点

:is() を使用することで、以下の利点が得られます。

将来性の確保: 新しい要素タイプやクラスを追加する際にも柔軟に対応できます。
メンテナンス性の向上: セレクターの変更を箇所一括で適用できます。
コードの簡潔化: 繰り返し記述を削減し、コードを読みやすく保ちます。

注意点

:is() を使用する際には、以下の点に注意する必要があります。

読みやすさの低下: 複雑な :is() セレクターは、コードの理解を妨げる可能性があります。
複雑度の増加: 複数のセレクターを組み合わせることで、セレクターの特異度が上がり、想定外のスタイルが適用される可能性があります。
ブラウザ互換性: 比較的新機能であるため、古いブラウザではサポートされていない場合があります。

.button, .icon {
  background-color: #4CAF50; /* グリーン */
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
}

:is(.button, .icon) {
  background-color: #4CAF50; /* グリーン */
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
}

例2：特定の要素の子要素にスタイルを適用

nav ul li {
  list-style: none;
  margin: 0;
  padding: 10px;
}

nav :is(ul li) {
  list-style: none;
  margin: 0;
  padding: 10px;
}

例3：擬似クラスと組み合わせて使用する

a:hover, a:focus {
  text-decoration: underline;
}

:is(a:hover, a:focus) {
  text-decoration: underline;
}

例4：属性セレクターと組み合わせて使用する

img[alt] {
  border: 1px solid #ccc;
}

:is(img[alt]) {
  border: 1px solid #ccc;
}

これらの例は、:is() セレクターがどのように使用できるかを示すほんの一例です。創造的に使用することで、CSS コードをより簡潔かつ効率的に記述することができます。

特定の状態にある要素にスタイルを適用する
フォーム要素内の特定の入力フィールドにスタイルを適用する
特定の要素の兄弟要素にスタイルを適用する
特定の要素とその子孫要素にスタイルを適用する

コンマ区切りのセレクター

最も基本的な方法は、カンマ区切りで複数のセレクターを羅列する方法です。これは、シンプルで分かりやすい方法ですが、セレクターが増えるとコードが冗長になり、メンテナンス性が低下する可能性があります。

h1, h2, h3 {
  color: blue;
  font-weight: bold;
}

ネストセレクター

nav ul li {
  list-style: none;
  margin: 0;
  padding: 10px;
}

汎用セレクターと属性セレクターの組み合わせ

汎用セレクター (*) と属性セレクターを組み合わせることで、特定の属性を持つすべての要素を対象としたスタイルを記述することができます。ただし、この方法は、対象範囲が広すぎる場合があるため、注意が必要です。

img[alt] {
  border: 1px solid #ccc;
}

JavaScript による動的なスタイル変更

JavaScript を使用して、動的にスタイルを適用する方法もあります。この方法は、複雑な条件分岐やアニメーションなどが必要な場合に有効です。ただし、JavaScript の知識が必要となるため、難易度が高くなります。

const elements = document.querySelectorAll('h1, h2, h3');
for (const element of elements) {
  element.style.color = 'blue';
  element.style.fontWeight = 'bold';
}