検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >どのようにCSS：is、：where and：pseudoclassセレクターが機能しているか

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

Joseph Gordon-Levitt
Joseph Gordon-Levittオリジナル
2025-02-09 11:38:10598ブラウズ

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

キーテイクアウト

  • CSS擬似クラスセレクター：is（）、：where（）、および：has（）は、HTML要素をターゲットにする新しい方法を提供します。 ：IS（）セレクターは、複数の要素のより効率的なスタイリングを可能にし、冗長セレクター文字列の必要性を減らします。 ：where（）selectorは：is（）と同様に動作しますが、特異性はゼロであるため、特異性を高めることなくベースラインスタイルを適用するのに役立ちます。 ：has（）セレクターは、他のセットを含む要素をターゲットにし、親要素をターゲットにするための待望の方法を提供します。
    • ：is（）and：where（）擬似クラスセレクターは、すべての最新のブラウザーでサポートされていますが、インターネットエクスプローラーではサポートされていません。 ：has（）セレクターは現在限られたサポートが限られていますが、2023年までに広く利用可能になると予想されています。これらのセレクターを使用すると、CSS構文を簡素化し、CSS前処理者の必要性を減らすことができます。
  • の特異性：is（）および：where（）selectorsが異なります。 ：is（）セレクターは、引数内で最も特定のセレクターと同じ特異性を持ち、：where（）selectorの特異性はゼロです。これは、特定のスタイリングが利用できない場合に一連のスタイルを適用するCSSリセットに実用的である可能性があり、特異性に関係なくCSSリセットスタイルをオーバーライドできます。
    • CSSセレクターを使用すると、HTMLドキュメント内のタイプ、属性、または場所で要素を選択できます。このチュートリアルでは、3つの新しいオプションについて説明します。：is（）、：where（）、およびhas（）。 セレクターは一般的にStyleSheetsで使用されます。次の例では、すべての

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

  • JavaScriptのセレクターを使用して、DOMノードを見つけることもできます。
document.querySelector（）最初の一致するHTML要素を返します
<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>
    document.QuerySeLectorAll（）アレイのようなノデリストのすべての一致するHTML要素を返します
    • 擬似クラスセレクターは、現在の状態に基づいてHTML要素をターゲットにします。おそらく最もよく知られているのは次のとおりです。ホバーは、カーソルが要素を介して移動するときにスタイルを適用するため、クリック可能なリンクとボタンを強調するために使用されます。その他の一般的なオプションには次のものがあります。
    • ：訪問：訪問リンク
の一致
    ：ターゲット：ドキュメントのurl
  • で標的となる要素と一致します
    • ：First-Child：最初の子要素をターゲット
    • ：nth-​​child：特定の子要素を選択
    • ：空：コンテンツや子の要素なしで要素を一致させる
    • ：チェック：トグルオンチェックボックスまたはラジオボタンを一致させます
    • ：空白：空の入力フィールドをスタイル
    • ：enabled：有効な入力フィールドと一致します
    • ：無効：無効化された入力フィールドに一致します
    • ：必須：必要な入力フィールドをターゲット
    • ：有効：有効な入力フィールドと一致します
    • ：無効：無効な入力フィールド
  • に一致します
    • ：再生：演奏オーディオまたはビデオ要素をターゲットにします
ブラウザは最近、さらに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（）擬似クラスを含めることができます。たとえば、次の複雑なセレクターは、.primaryまたは.secondaryのクラスを持つ
    の子供であるすべての

    、

    、および

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

  • 等価コードなし：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：is、：where and：pseudoclassセレクターが機能しているか エディターにジャンプしてCSSコードベースをリファクタリングする前に、次のことに注意してください（）は新しいものであり、サポートは以下よりも制限されています。 Safari 15.4とChrome 101で実験フラグの背後にありますが、2023年までに広く利用できるはずです。

selector概要

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

cssに関するよくある質問（FAQ）：is（）and：where（）pseudoクラスセレクター

次の主な違いは次のとおりです。その特異性にあります。 ：is（）擬似クラスセレクターは、セレクターが内部に配置されたセレクターと同じ特異性を持っています。一方、：where（）pseudoクラスセレクターの特異性はゼロです。つまり、セレクターの全体的な特異性に寄与しません。これは、特異性を高めることなく要素のグループにスタイルを適用する場合に特に役立ちます。 > はい、すべてのCSSプロパティを備えた（）where（）pseudoクラスセレクターを使用できます。これらの擬似クラスセレクターは、特定のCSSプロパティに結び付けられていません。特定の条件に基づいて要素を選択するために使用され、選択した要素にCSSプロパティを適用できます。

ase：is（）and：where（）pseudo-classセレクターはすべてのブラウザーでサポートされていますか？

：is（）and：where（）pseudoクラスセレクターはCSSに比較的新しい追加であり、ほとんどの最新のブラウザでサポートされています。ただし、古いブラウザやインターネットエクスプローラーのバージョンではサポートされていない場合があります。コードでこれらのセレクターを使用する前に使用できるようなサイトで現在のブラウザサポートをチェックすることをお勧めします。 >

：IS（）CSSの擬似クラスセレクターを使用すると、複数のセレクターを1つにグループ化できます。たとえば、H1、H2、およびH3の3つの別々のセレクターを作成する代わりに、次のようなIS（）擬似クラスセレクターを使用してそれらをグループ化できます。 }。 IS（）擬似クラスセレクターですが、特異性はゼロです。たとえば、特異性を高めることなく、特定のクラスのすべての要素を選択するために使用できます。 }。これは、複数の条件を満たす要素を選択する場合に役立ちます。たとえば、次のようなdiv要素内のすべてのH1およびH2要素を選択できます：div：is（h1、h2）{color：blue; }。

：is（）and：where（）pseudo-classセレクターを使用したpseudo-classセレクター？ - 擬似要素を備えたクラスセレクター。たとえば、次のようなH1およびH2要素のすべての最初の文字を選択できます。 }。属性セレクターを備えたクラスセレクター。たとえば、次のようなデータアトリブを使用してすべての要素を選択できます。 }。

：as（）and：where（）classセレクターを備えたpseudoクラスセレクターを使用できますか？クラスセレクターを備えたクラスセレクター。たとえば、次のような特定のクラスを持つすべての要素を選択できます。 }。 IDセレクターを備えたクラスセレクター。たとえば、次のような特定のIDを持つすべての要素を選択できます。 }。

以上がどのようにCSS：is、：where and：pseudoclassセレクターが機能しているかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css chrome safari less html sass Array if for while select checkbox include Error break using class finally Attribute Property number default dom this location margin border input idea Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：クイックヒント：弾力性のあるCSSコンポーネントの配送次の記事：クイックヒント：弾力性のあるCSSコンポーネントの配送

関連記事

続きを見る