css - CSSは別の要素の複数の子孫を選択します

Question

CSSで特定のクラス、IDなどの祖先を持つ複数の要素を選択することは可能ですか？例えば：

table.exams caption, tbody, tfoot, thead, tr, th, td

そうでない場合、その要素のすべての子孫を選択する方法はありますか？

Answer 1

CSSで特定のクラス、IDなどの祖先を持つ複数の要素を選択することは可能ですか？

これは、以下のこの回答の元のバージョンで説明されているように発生する:is()疑似クラスで可能になりました。:matches()と混同しないように注意してください:where()。これにより、セレクターにとって重要な特異性が削除されます。

table.exams :is(caption, tbody, tfoot, thead, tr, th, td)

---

以前は:is()、これは、祖先セレクター全体を複製し、すべての子孫を指定しない限り不可能でした¹：

table.exams caption, 
table.exams tbody, 
table.exams tfoot, 
table.exams thead, 
table.exams tr, 
table.exams th, 
table.exams td

Selectors 3が完成してから、これを行うための疑似クラス表記法が提案されました。基本的な実装が登場し始めたのはつい最近のことです。ちょっとした歴史のレッスンについては、この回答を参照してください。

要するに、現在標準に入っている疑似クラスはとして知られてい:matches()ます。遠い将来、ブラウザが実装:matches()を開始すると、次のようなことができるようになります。

table.exams :matches(caption, tbody, tfoot, thead, tr, th, td)

---

¹ _{特にテーブルの場合は、を回避できますが、これは非常にわかりにくいため（このテーブル内にスクリプトをサポートする要素table.exams > :not(colgroup), table.exams > * > tr > *やネストされたテーブルがないことを前提としていることは言うまでもありません）、すべてをリストする方がよいでしょう。明示的に必要な子孫。}

Answer 2

これを：is（）セレクターで実行できるようになりました。より大きな選択が必要な場合:notは、コードスニペットのように組み合わせて使用​​して、より小さな比率を除外できます。

このセレクターは、4つの主要なブラウザー（Edge、Firefox、Chrome、Safari）すべての最新バージョンで使用できます。https ： //caniuse.com/？search = is as 26/1/2021

.match-elements :is(.match-1,.match-2,.match-5,.match-10) {
  background: #5548B0;
}

.match-elements :not(:is(.match-1,.match-2,.match-5,.match-10)) {
  background: #BADA55;
}

/* For snippet styling, not required */

.match-elements div {
  font-family: sans-serif;
  font-weight: 600;
  color: white;
  padding: 10px;
  margin: 10px 0;
}

<div class="match-elements">
  <div class="match-1">Matched using is</div>
  <div class="match-2">Matched using is</div>
  <div class="match-3">Matched using not</div>
  <div class="match-4">Matched using not</div>
  <div class="match-5">Matched using is</div>
  <div class="match-6">Matched using not</div>
  <div class="match-7">Matched using not</div>
  <div class="match-8">Matched using not</div>
  <div class="match-9">Matched using not</div>
  <div class="match-10">Matched using is</div>
</div>

Answer 3

CSSで特定のクラスの祖先を持つ複数のタグを選択することは可能ですか？

この記事に示すように、SCSSを使用して：matchesと同様の結果を得ることができます。

また、特定のブラウザでは:matches、ベンダー固有のプレフィックスを部分的にサポートしています。