CSS セレクター: 最新の Web デザインのための高度なセレクターのロックを解除する-CSSチュートリアル-php.cn

CSS セレクター: 最新の Web デザインのための高度なセレクターのロックを解除する

Mary-Kate Olsen

リリース： 2024-11-27 13:42:11

オリジナル

163 人が閲覧しました

皆さんこんにちは！私のブログへようこそ。 ?

導入

今日は、高度な CSS セレクターの世界に飛び込みます。 :is()、:where()、:not()、および:has() などのこれらのセレクターは、その特異性ルールやブラウザーのサポートの問題のため、最初は少し扱いにくいように思えるかもしれませんが、これらは非常に強力なツールです。より効率的で動的な CSS を作成します。これらのセレクターを一緒に調べて、それらがどのように機能するかを理解し、実際に動作しているのを見て、追加のニュアンスについて話し合いましょう。

この記事で学ぶこと

各セレクターの理解 : :is()、:where()、:not()、および :has() の詳細。
ブラウザサポート : これらのセレクターをサポートするブラウザを確認します。
Specificity Insights : これらのセレクターが CSS ルールの適用にどのように影響するか。
実践例 : これらのセレクターが CSS を簡略化する方法を示す実際の使用例。
ベストプラクティス : これらのセレクターを効果的に使用するためのヒント。

? :is() セレクター

:is() とは何ですか?

:is() 擬似クラス関数を使用すると、同じプロパティを繰り返すことなく、複数のセレクターにスタイルを適用できます。これは、異なる特異性を持つセレクターをグループ化する場合に特に便利です。

例:

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

ログイン後にコピー

結果: すべてのアラートタイプに、特定のクラスで定義された色を持つ太字のフォントと境界線が表示されます。

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

?ヒント: Codepen のすべての例をコピーして貼り付けると、実際の結果を確認できます。

? :where() セレクター

:where() とは何ですか?

:is()、:where() グループセレクターに似ていますが、特異性が 0 であるため、オーバーライドしやすいスタイルの作成に最適です。

例:

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

ログイン後にコピー

結果:

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

? :not() セレクター

:not() とは何ですか?

:not() 疑似クラスは、選択から特定の要素を除外するために使用されます。特定の要素またはクラス以外のすべてにスタイルを適用するのに最適です。

例:

<ul>
    <li>





<pre class="brush:php;toolbar:false">/* Style all list items except those marked as 'done' */
li:not(.done) {
    background-color: #f0f0f0;
}

/* Darken the text for completed items */
li.done {
    color: #888;
}

ログイン後にコピー

結果:

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

? :has() セレクター

:has() とは何ですか?

:has() 疑似クラスを使用すると、要素に含まれる内容に基づいて要素のスタイルを設定できます。このセレクターは非常に強力ですが、執筆時点ではブラウザーのサポートが制限されています。

例:

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

ログイン後にコピー

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

ログイン後にコピー

結果:

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

ブラウザのサポート

:is() and :where(): 最近のブラウザは通常これらをサポートしていますが、常に最新の互換性データを確認してください。
:not(): 幅広くサポートされていますが、:not() 内の複雑なセレクターは古いブラウザでは動作しない可能性があります。
:has(): 他のブラウザでは実験的にサポートされている、Safari の最新バージョンに限定されます。慎重に使用するか、互換性を高めるためにポリフィルを使用してください。

特異性に関する考慮事項

:is() と :where() は、含まれるセレクターから最も高い特異性を継承しますが、:where() 自体の特異性はゼロです。
:not() の特異性は、それに含まれるセレクターの特異性です。
:has() は、その中のセレクターに依存するため、複雑な特異性の問題を引き起こす可能性がありますが、特異性スコアに直接追加されるわけではありません。

高度なセレクターを使用するためのベストプラクティス

DRY CSS に使用 : これらのセレクターは繰り返しを減らし、CSS をより保守しやすくします。
パフォーマンスを考慮する : 複雑なセレクター、特にネストされたセレクターはパフォーマンスに影響を与える可能性があります。
古いブラウザのフォールバック : :has() を使用する場合は、フォールバックがあることを確認するか、@supports で機能クエリを使用してください。
使いすぎを避ける : 強力ではありますが、可読性が重要であるため、セレクターを複雑にしすぎないでください。