子孫グループ化のためのとらえどころのない CSS セレクター

CSS にはスタイル要素の強力なオプションが用意されていますが、注目すべき欠如の 1 つは、子孫を簡単にグループ化する機能です。 。この制限は、HTML テーブルのような複雑な要素をスタイル設定する場合に顕著になります。列見出しとセルの両方に同じスタイルを割り当てるには、面倒なセレクターが必要になります。

子孫スタイルのジレンマ

次のテーブルの例を考えてみましょう:

  ...
  

単一のセレクターで見出しとセルの両方のスタイルを設定するには、通常、次を使用します:

#myTable th, #myTable td {}

ただし、このアプローチは、多数の要素を扱う場合には冗長で退屈です。

The (th, td)セレクター: 逃した機会

より直観的な構文は、次のようなグループ化セレクターを使用することです。

#myTable (th, td) {}

残念ながら、そのような構文は CSS には存在しません。

2008 年以前の提案の無駄

結局のところ、子孫グループ化セレクターの欠如は長年の問題でした。 2008 年に提案された :any() 擬似クラスなど、初期の導入の試みは注目を集めませんでした。

最近の発展と希望の輝き

ただし、セレクター レベル 4 ワーキング ドラフトでは、グループ化擬似クラス :matches() の概念が再導入されています。この提案は有望ですが、ブラウザのサポートはまだ遠いです。

代替ソリューション

それまでの間、子孫のグループ化にはいくつかの回避策があります:

• * セレクターの使用:

  #myTable tr > * {}

  (これは、tr 要素には td または th 要素のみが含まれ、他の要素は含まれないことを前提としていることに注意してください)

• パフォーマンスを最大化するために、冗長な th、td アプローチに固執します

結論

CSS には子孫グループ化セレクターが欠如しています。長年にわたる根深い問題。最近の提案には一縷の希望が示されていますが、広範囲にわたるブラウザのサポートは依然として実現できていません。それまでは、開発者は別のアプローチに依存するか、既存の th, td セレクターの冗長さに甘んじる必要があります。