どのようにCSS：is、：where and：pseudoclassセレクターが機能しているか

キーテイクアウト

CSS擬似クラスセレクター：is（）、：where（）、および：has（）は、HTML要素をターゲットにする新しい方法を提供します。：IS（）セレクターは、複数の要素のより効率的なスタイリングを可能にし、冗長セレクター文字列の必要性を減らします。：where（）selectorは：is（）と同様に動作しますが、特異性はゼロであるため、特異性を高めることなくベースラインスタイルを適用するのに役立ちます。：has（）セレクターは、他のセットを含む要素をターゲットにし、親要素をターゲットにするための待望の方法を提供します。
の特異性：is（）および：where（）selectorsが異なります。：is（）セレクターは、引数内で最も特定のセレクターと同じ特異性を持ち、：where（）selectorの特異性はゼロです。これは、特定のスタイリングが利用できない場合に一連のスタイルを適用するCSSリセットに実用的である可能性があり、特異性に関係なくCSSリセットスタイルをオーバーライドできます。

段落要素を見つけて、フォントの重みを太字に変更します。

JavaScriptのセレクターを使用して、DOMノードを見つけることもできます。

document.querySelector（）最初の一致するHTML要素を返します

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

ログイン後にコピー

の一致

で標的となる要素と一致します
に一致します

ブラウザは最近、さらに3つの擬似クラスセレクターを受け取りました…

css：は擬似クラスセレクター

です注：これは元々、Matches（）および：any（）、but：is（）がCSS標準になっているとして指定されていました。多くの場合、同じスタイリングを複数の要素に適用する必要があります。たとえば、
段落テキストはデフォルトでは黒ですが、、
、または内に表示されると灰色です。
これは簡単な例ですが、より洗練されたページは、より複雑で冗長セレクター文字列につながります。任意のセレクターの構文エラーは、すべての要素のスタイリングを破る可能性があります。 SASS許可のネスト（ネイティブCSSにも来ています）などのCSSプレセッサー：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

ログイン後にコピー

これにより、同一のCSSコードが作成され、タイピングの努力が削減され、エラーを防ぐことができます。しかし：

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

ログイン後にコピー

ネイティブネストが到着するまで、CSSビルドツールが必要になります。 SASSのようなオプションを使用することをお勧めしますが、一部の開発チームに合併症を導入できます。

：is（）は、すべての最新のブラウザーで完全なサポートを持つネイティブCSSソリューションを提供します（つまりではありません）：

の子供であるすべての

、

、および

要素に緑色のテキスト色を適用します。の最初の子供：

等価コードなし：IS（）4つのCSSセレクターが必要です。

次のことに注意してください：is（）は一致できません:: :: :: pseudo-elementsの後、この例コードは失敗します。

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

CSS：ここでは、擬似クラスセレクター

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

ログイン後にコピー

：where（）selector構文は次のように同一であり、すべての最新のブラウザー（IEではなく）でサポートされています。多くの場合、同一のスタイリングになります。例えば：

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

ログイン後にコピー

違いは

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

ログイン後にコピー

特異性

です。特異性は、どのCSSセレクターが他のすべてをオーバーライドすべきかを決定するために使用されるアルゴリズムです。次の例では、記事PはPだけよりも具体的であるため、内のすべての段落要素は灰色になります。

の場合：IS（）の場合、特異性はその引数内で見られる最も具体的なセレクターです。の場合：where（）、特異性はゼロです。次のCSSを検討してください。

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

ログイン後にコピー

このCSSを次のHTMLに適用しましょう。 次のCodepenデモに示すように、段落のテキストは赤色になります。 ペンを参照してください使用：SELECTORによるISセレクター（@SitePoint） codepen。

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

ログイン後にコピー

：is（）セレクターは記事Pと同じ特異性を持っていますが、スタイルシートの後半に掲載されるため、テキストは赤くなります。青色を適用するために、記事pと：is（）セレクターの両方を削除する必要があります。より多くのコードベースが使用されます：is（）より：where（）。ただし、次のゼロ特異性は、cssリセットのゼロ特異性をリセットすることができます。これは、特定のスタイリングが利用できない場合に標準スタイルのベースラインを適用します。通常、リセットはデフォルトのフォント、色、パディング、マージンを適用します。このCSSリセットコードは、1EMから

見出しの上部マージンを適用します。 StyleSheetの後半にカスタム
の上限を設定しようとすると、記事：First-Childの特異性が高いため、効果はありません。
これは、より高い分野セレクターを使用して修正できますが、それはより多くのコードであり、他の開発者にとって必ずしも明白ではありません。あなたは最終的にあなたがそれを必要とする理由を忘れるでしょう：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

ログイン後にコピー

また、各スタイルに重要！重要なことを適用することで問題を修正することもできますが、それを避けることは避けてください！

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

ログイン後にコピー

より良い選択は、cssリセットのゼロ特異性を採用することです。

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

特異性に関係なく、CSSリセットスタイルをオーバーライドできるようになりました。さらなるセレクターまたは！重要なものは必要ありません： CSS：擬似クラスセレクター

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

ログイン後にコピー

があります：has（）セレクターは、同様の構文を次のように使用します。たとえば、1つ以上のタグを含むリンクに青色の2ピクセルの境界を追加するためのCSSは次のとおりです。

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

ログイン後にコピー

これは数十年で最もエキサイティングなCSS開発です！

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

ログイン後にコピー

開発者は最終的に親要素をターゲットにする方法を持っています！

とらえどころのない「親セレクター」は、最も要求されているCSS機能の1つですが、ブラウザーベンダーのパフォーマンスの合併症を引き起こし、そのために長い時間がかかりました。単純な用語：

ブラウザは、ページに描画されたときにCSSスタイルを要素に適用します。したがって、さらに子供の要素を追加するときに親子全体を再描画する必要があります。 JavaScriptに要素を追加、削除、または変更することで、ページ全体のスタイリングに影響を与える可能性があります。ベンダーがパフォーマンスの問題を解決したと仮定すると、以下の導入は、過去にJavaScriptなしで不可能だった可能性を許可します。たとえば、必要な内部フィールドが有効でない場合、外側のフォーム

のスタイルと次の送信ボタンを設定できます。

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

ログイン後にコピー

どのようにCSS：is、：where and：pseudoclassセレクターが機能しているか

この例では、チャイルドメニュー項目のリストを含むナビゲーションリンクサブメニューインジケーターを追加します。

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

ログイン後にコピー

または、内側のIMGなしですべての要素を強調表示するなど、デバッグスタイルを追加することもできます。

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

エディターにジャンプしてCSSコードベースをリファクタリングする前に、次のことに注意してください（）は新しいものであり、サポートは以下よりも制限されています。 Safari 15.4とChrome 101で実験フラグの背後にありますが、2023年までに広く利用できるはずです。

selector概要

：is（）および：where（）擬似クラスセレクターはCSS構文を簡素化します。ネスティングやCSSの前処理者の必要性は少なくなります（これらのツールは、部分的、ループ、模倣などの他の利点を提供します）。：has（）はかなり革新的でエキサイティングです。親の選択は急速に人気があり、暗い時代を忘れます！すべての最新のブラウザで利用可能な場合、フル：has（）チュートリアルを公開します。 CSSの擬似クラスセレクターをより深く掘り下げたい場合は、GridやFlexboxなどの他のすべてのCSSとともに、ティファニーブラウンのAwesome BookCSS Masterをチェックしてください。