CSS セレクターで子孫をグループ化するにはどうすればよいですか?

CSS セレクターでの子孫のグループ化

子孫のグループをスタイル設定する一般的な必要性にもかかわらず、CSS にはこのタスクに対する直接的なアプローチがありません。単純な HTML テーブルを考えてみましょう:

`

<th></th>
<th></th>
<th></th>

.
.
.

<td></td>
<td></td>
<td></td>

`

伝統的に、すべての列見出しとセルのスタイルを設定します。冗長セレクターが必要です:

#myTable th, #myTable td {}

代わりに次のような構文を使用できないのはなぜですか:

#myTable (th,td ) {}

提案されたソリューション

最近まで、CSS セレクターで子孫をグループ化するための標準ソリューションはありませんでした。ただし、次の疑似クラスが提案されています:

• :-moz-any(): 2010 年に Mozilla によって導入されました。
• : -webkit-any(): WebKit ブラウザーに推奨されていますが、広く採用されていません。

ただし、これらの接頭辞付きセレクターを使用するにはルールセットを複製する必要があり、公開コードには推奨されません。

将来の開発

セレクターのレベル 4 作業草案は、元の :any() 提案に基づいて、:matches() 疑似クラスを提案します。この新しい疑似クラスは、将来のリビジョンで拡張機能を提供する可能性があります。

回避策

th 要素と td 要素の両方をスタイル設定する特定のケースでは、* セレクターを使用できます。

#myTable tr > * {}

これは、tr 要素には cell 要素のみが含まれることを前提としています。ただし、パフォーマンスを重視する開発者にとって、これはまだ冗長な方法ほど効率的ではありません。

以上がCSS セレクターで子孫をグループ化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。