CSS で子孫要素をグループ化するにはどうすればよいですか?

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

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

子孫スタイルのジレンマ

次の表の例を考えてみましょう。

<code class="html"><table id='myTable'>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table></code>

1 つのセレクターで見出しとセルの両方をスタイルするには、通常、次を使用します。

<code class="css">#myTable th, #myTable td {}</code>

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

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

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

<code class="css">#myTable (th, td) {}</code>

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

2008 年以前の提案の無駄

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

最近の発展と一縷の希望

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

代替ソリューション

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

• * セレクターの使用:

  <code class="css">#myTable tr > * {}</code>

  ログイン後にコピー

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

• 最大のパフォーマンスを得るために冗長な th、td アプローチを堅持する

結論

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

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