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

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

導入

今日は、高度な 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; }

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

?ヒント: 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;
}

結果:

? :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;
}

結果:

? :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;
}

結果:

ブラウザのサポート

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

特異性に関する考慮事項

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

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

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

実際の応用

• スタイリング コンポーネント : 異なるボタン クラスまたはフォーム要素間で共通のスタイルには、:is() と :where() を使用します。

• 動的レイアウト : :has() は、特定の要素の存在によって親のスタイルが変更されるアダプティブ レイアウトに使用できます。

• レスポンシブ デザイン : これらのセレクターをメディア クエリと組み合わせて、さらに動的でコンテキストを意識したデザインを実現します。

結論

高度な CSS セレクターを使用すると、スタイルシートを合理化し、よりクリーンかつ効率的にすることができます。ブラウザーのサポート、特に:has() に注意し、これらのセレクターを賢く使用して、保守性を犠牲にすることなく CSS を強化してください。

コーディングを楽しんでください。CSS が必要なだけ選択的になりますように! ?

---

?こんにちは、私はエレフテリアです。コミュニティ マネージャー開発者、講演者、コンテンツ作成者

です。

?この記事が気に入ったら、共有することを検討してください。

? すべてのリンク | X | LinkedIn

以上がCSS セレクター: 最新の Web デザインのための高度なセレクターのロックを解除するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。