`：has（）` pseudo-class（parent selector）を説明する
：CSSの（）擬似クラスは、子要素に基づいて親要素をターゲットにすることができます。 Syntax Parent：（子セレクター）を使用して、スタイルを条件付きで適用することで機能します。たとえば、div：has（img）は、画像を含むdivにスタイルを適用します。複数のセレクターは、div：has（img、p.special）などのコンマで使用できます。一般的なユースケースには、スタイリングコンテナ、フォーム検証フィードバック、およびサブメナスのあるメニュー項目を示すことが含まれます。 Browser Supportは、Chrome、Safari、Edgeなどの最新のブラウザで利用できますが、Firefoxには2024年後半の時点ではサポートがありません。考慮事項には、パフォーマンスへの影響、非営業行動、およびサポートされていない環境でのフォールバックの必要性が含まれます。
:has() pseudo-classは、特定の子要素またはその中の状態の存在に基づいて親要素をターゲットにすることができる強力なCSSセレクターです。以前:has()が導入されましたが、CSSには子供に基づいて親を選択するネイティブの方法はありませんでした。次に、 :has() 、これはCSSのみを使用して可能になります。
使用方法:has()
:has() 、セレクターを引数として取得し、その内部に少なくとも1つの一致する要素を含む要素を一致させることで機能します。構文は次のように見えます：
親：has（子セレクター）{
/ * styles */
}たとえば、 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175251076578590.jpeg" class="lazy" alt="`：has（）` pseudo-class（parent selector）を説明する" >が含まれている場合にのみ<div>スタイルを作成したい場合は、次のことを書くことができます。
div：has（img）{
ボーダー：2pxソリッドグリーン。
}これにより、境界線は、内部のどこかに画像タグを直接含むdiv要素にのみ適用します。
また、複数のセレクターを内部にチェーンすることもできます:has()
div：has（img、p.special）{
バックグラウンドカラー：＃f0f0f0;
}このルールは、 imgとp両方を備えたDIVとspecialの両方のdivと一致します。
一般的なユースケース:has()
- 条件付きのスタイリングコンテナ：たとえば、ビデオが含まれている場合にのみ、さまざまなパディングまたはマージンをカードレイアウトに適用します。
- フォーム検証フィードバック：必要な入力が無効である場合のフォームグループの強調表示。
- サブメナス付きのメニュー項目：リストがネストされているメニュー項目にのみ矢印またはインジケーターを適用します。
これが現実世界の例です：
li：has（ul）{
位置：相対;
パディング右：20px;
}
li：has（ul）::後{
コンテンツ： '▾';
位置：絶対;
右：5px;
}これにより、サブメニュー（ <ul></ul> ）を含む任意のリスト項目にドロップダウンインジケーターが追加され、ナビゲーションが追加のマークアップを追加せずに直感的になります。
ブラウザのサポートと考慮事項
現在、 :has() 、Chrome（V105）、Safari（V15.4）、Edge（V106）などのほとんどの最新のブラウザーでサポートされています。 Firefoxのサポートは2024年後半の時点でまだ保留中です。そのため、幅広い視聴者をターゲットにしている場合は、互換性を確認することが重要です。
また、覚えておいてください：
-
:has()、過度に使用される場合、または複雑なセレクターで使用するとパフォーマンスに影響を与える可能性があります。 - JavaScriptと同じように動的ではありません。レンダリング時にのみ評価します。
- サポートされていないブラウザにフォールバックが用意されていない限り、重要なレイアウトで使用しないでください。
生産で使用している場合は、機能の検出またはプログレッシブエンハンスメント戦略を検討して、サイトをどこにでも使用できるようにします。
基本的に、 :has() CSSに構造に基づいた条件付きスタイリングのための長いミッシングツールを提供します。まだ普遍的にサポートされていませんが、将来の使用を試して計画する価値は間違いありません。
以上が`：has（）` pseudo-class（parent selector）を説明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
CSSで点線の境界線を作成する方法
Aug 15, 2025 am 04:56 AM
CSSを使用して点線の境界線を作成し、境界属性を点線に設定するだけです。たとえば、「Border：3PXDotted＃000」は、3ピクセル幅のブラックドットボーダーを要素に追加できます。境界線を調整することにより、ポイントのサイズを変更できます。より広い境界線はより大きなポイントを生み出します。 「Border-Top：2pxdottred」など、特定の側に点線の境界線を設定できます。点線の境界線は、Divや入力などのブロックレベルの要素に適しています。それらは、アクセシビリティを改善するために、フォーカス状態または編集可能な領域でよく使用されます。色のコントラストに注意してください。同時に、Dashedのショートラインスタイルとは異なり、点線は円形のドット形状を示します。この機能は、すべての主流ブラウザで広く使用されています。
背景にCSSグラデーションを使用する方法
Aug 17, 2025 am 08:39 AM
cssgradientsprovidesmoothcolortransitionswithoutimages.1.Linear GradientsColorSalOrsalOrsArtaightlineSingDirectionSlikotobottOMORANGLESLIKE45DEG、ANDSUPPORTMULTIPRECOLORSTOPSFORCHLEXEFFECTS.2
CSSを使用してガラスムルファズム効果を作成する方法
Aug 22, 2025 am 07:54 AM
CSSのガラス模倣効果を作成するには、背景のぼかしを実現するために背景フィルターを使用し、RGBA（255,255,255,0.1）などの半透明の背景を設定し、サブルの境界と影を追加して階層の感覚を高め、要素の背後に十分な視覚的コンテンツがあることを確認する必要があります。 1。背景：Blur（10px）を使用して、バックグラウンドコンテンツを曖昧にします。 2. RGBAまたはHSLAを使用して透明な背景を定義して、透明性の程度を制御します。 3. 3次元を強化するために、1pxsolidrgba（255,255,255,0.3）の境界線とボックスシェードを追加します。 4.容器に写真やテクスチャなどの豊富な背景があることを確認して、ぼやけた浸透効果を提示します。 5.古いブラウザと互換性があります
CSSのリストスタイルを変更する方法
Aug 17, 2025 am 10:04 AM
CSSリストスタイルを変更するには、最初にリストスタイルタイプを使用して弾丸または番号付けスタイルを変更します。 1.リストスタイルタイプを使用して、ULの弾丸をディスク、円、または正方形に設定し、OLの数は小数、下部アルファ、上部アルファ、下部ローマンまたはアッパーローマです。 2。リストスタイルでタグを完全に削除します：なし。 3.リストスタイルイメージ：url（ 'bullet.png'）を使用して、カスタム画像に置き換えます。 4。リストスタイルのポジションを使用します：in
CSSでダークモードテーマを実装する方法
Aug 22, 2025 am 09:55 AM
ダークモードを実装する主な方法は2つあります。1つは、システムの好みを適応させるために自動的に照会するためにカラーシェームメディアを好むことを使用することです。もう1つはJavaScriptを介して手動スイッチング機能を追加することです。 1.ユーザーシステムに応じて暗いテーマを自動的に適用するには、カラーシェームを好みます。 JavaScriptは必要ありません。メディアクエリのスタイルを定義するだけです。 2。手動の切り替えを実現するには、ライトテーマとダークテーマのクラスを定義し、トグルボタンを追加し、JavaScriptを使用してテーマステータスとローカルストレージを管理してユーザーの好みを保存する必要があります。 3.両方を組み合わせて、ページが読み込まれたときに最初にLocalstを読むことができます。
CSSのカーソルを変更する方法
Aug 16, 2025 am 05:00 AM
usebuilt-incursortypeslikepointer、help、help、ornot-allowedprovideimmediatefeedfordifferentinteractiveelements.2.applycustomcursorimages withthecursorpropertyusisusaurl、オプションでは、オプションの指定を行うと、afalwalwalwalwalwalwalwalwallikeorpoorpoorpoorpoorpoorpooutoutoutoorpooutoutoorpooutoorpotoorpotourpotrikedalways
CSSでグリッドテンプレートエリアを使用する方法
Aug 22, 2025 am 07:56 AM
grid-template-areaspropertyallowsdeveloperSocreateive、readablelayoutsbydefiningnamedgridareas;それぞれwith-areanamesonchildelementsは、headerheaderer "for
CSSを使用した順序付けされたリストと順序付けられていないリストをスタイリングする方法
Aug 22, 2025 am 07:59 AM
cslowsfullcustomization ofordereddundunoredStoenhanceReadabilityanddesignconsistency.youcanchangededededededeled-style-typeproperty、soctingtingundliststoussquare、circe、ornobullets、および順調に測定された方法を順調に進めます
