:where() で複雑なセレクターに別れを告げる

:where() とは何ですか?

:where() は、複数のセレクターを 1 つの簡潔な式にグループ化できる CSS ツールボックスの強力なツールと考えてください。これは、特異性の競合を気にせずに、指定されたセレクターのいずれかに一致する要素にスタイルを適用する場合に特に便利です。

基本構文:

element:where(selector1, selector2, ...) {
  /* Styles to be applied */
}

例:
すべての

をスタイルしたいとします。ハイライトクラスまたは重要クラスのいずれかを含む要素。 :where() は次のように使用できます:

p:where(.highlight, .important) {
  font-weight: bold;
  color: red;
}

:where() を使用する理由

1. 読みやすさの向上:
   • CSS をより簡潔で理解しやすくします。
2. 特異性制御:
   • :where() には具体性がないため、スタイルをより簡単にオーバーライドできます。
3. 保守性の強化:
   • セレクターをグループ化すると、CSS をよりモジュール化し、保守しやすくなります。

実際の例:
ナビゲーション バーのある Web サイトがあると想像してください。アクティブなナビゲーション リンクのスタイルを変更したいと考えています。 :where() を使用して、:hover 状態と :active 状態の両方をターゲットにすることができます:

nav a:where(:hover, :active) {
  background-color: #f0f0f0;
  color: #333;
}

結論:
:where() を理解し、効果的に使用することで、より効率的で保守しやすく洗練された CSS コードを作成できます。これは、Web 開発者にとって貴重なツールです。

複雑なセレクターに :where() を活用する

:where() は単純なセレクターのグループ化に最適ですが、複雑なセレクターと一緒に使用するとさらに強力になります。

例: 特定のテーブルセルのスタイル
表の特定のセルの内容と位置に基づいてスタイルを設定したいとします。 :where() を使用して複数のセレクターを組み合わせることができます:

table td:where(
  :nth-child(2),
  :contains("Important")
) {
  background-color: yellow;
  font-weight: bold;
}

このコードは、表の各セルの 2 番目の子と、「重要」という単語を含むセルのスタイルを設定します。

:where() と他の疑似クラスの組み合わせ

:where() を他の疑似クラスと組み合わせて、さらに具体的なセレクターを作成することもできます。

a:where(:hover, :focus) {
  text-decoration: underline;
  color: blue;
}

このコードは、アンカー リンクの :hover 状態と :focus 状態の両方をスタイルします。

使用のベストプラクティス :where()

1. 慎重に使用してください: :where() を過度に使用しないでください。CSS の読み取りと保守がより複雑になる可能性があります。
2. 特異性を優先する: :where() には特異性がありませんが、CSS を記述する際には特異性を考慮することが重要です。
3. 徹底的にテストします: 互換性を確保するために、CSS を常に別のブラウザでテストしてください。

結論:
:where() 擬似クラスは、最新の CSS にとって貴重なツールです。使い方をマスターすることで、より効率的で保守しやすくエレガントな CSS コードを作成できるようになります。

以上が:where() で複雑なセレクターに別れを告げるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。