より多くの現実世界使用：has（）-CSSチュートリアル-php.cn

より多くの現実世界使用：has（）

Christopher Nolan

リリース： 2025-03-09 11:51:12

オリジナル

242 人が閲覧しました

More Real-World Uses for :has()

CSSの:has()擬似クラスは間違いなくCSSの私のお気に入りの新機能の1つであり、CSS Stuys Surveyの多くの参加者がこれに同意していると思います。セレクターを「反転」するこの能力により、予想外に強力な機能が得られます。

それが「より強力」と呼ばれる理由は、多くのスマート開発者が次のような多くの驚くべき賢いアイデアを公開しているからです。

bramus '"CSSを使用して、同じクラスを使用して「要素島」の多くのクエリを実装しています：has（）
bramus '"子ども数に基づいて親要素のスタイルを設定
マヌエル・マチュゾヴィッチの「コンビネーターを使用する：has（）」
オースティンギルの「HTMLフォームを優れたものにする4つの方法」
Zoran Jamborの「ビデオ：： has（）実用的なケース」
Jhey Tompkins's "：has（）：family selector"

の権威あるガイドではなく、既存のコンテンツの重複でもありません。私は、私の日常の仕事で

を使用する可能性が最も高い方法のいくつかを共有したいだけです。もちろん、前提は、ブラウザのサポートが十分であるということです。（Firefoxは忍耐する最後のブラウザですが、すぐにサポートされます。）:has() :has()ブラウザのサポートが完璧になったら、どこでも間違いなく使用します

。ここに私が最近構築したいくつかの実際のケースがあり、「これは一度

がどれほどシンプルになるか！」と思いました :has()JavaScriptコンポーネントの外部で操作しないでください:has()

他の場所でページのスタイルに影響を与える必要があるインタラクティブなコンポーネントを構築したことがありますか？次の例では、

はメガメニューで、上記のコンテンツの色が変更されます。

<nav></nav>私はいつもこの種のことをする必要があると感じています。

この具体的な例は、ウェブサイト用に作成したReactコンポーネントです。「Touch」ページのReactセクションの外側で

を使用して、クラスを

、

、またはその他のコンポーネントのクラスを切り替える必要がありました。これは世界の終わりではありませんが、少し厄介に感じます。完全なReact Webサイト（next.js Webサイトなど）でさえ、より高いコンポーネントツリーでdocument.querySelector(...)状態を管理するか、同じDOM要素の選択を実行するかどうかを選択する必要がありました。 <header></header>では、問題は解決されます：<main></main> menuIsOpen :has()私のJavaScriptコンポーネントは、DOMの他の部分を処理する必要がなくなりました！

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

ログイン後にコピー

より良いテーブルストライプユーザーエクスペリエンス

テーブルに交互の行「ストライプ」を追加すると、ユーザーエクスペリエンスが向上する可能性があります。彼らはあなたの目がテーブルをスキャンするときにあなたが現在いる行を追跡するのを助けます。

しかし、私の経験では、これは2つまたは3行しかないテーブルではうまく機能しません。たとえば、テーブルに<tbody>に3列があり、「ストライプ」偶数の行がある場合、1つのストライプだけになってしまう可能性があります。これはこのパターンにふさわしくなく、ユーザーにその強調表示されたラインの特別なことを疑問に思うかもしれません。 bramusを使用して、子要素の数に基づいてスタイルを適用する手法を使用して、3行以上がある場合にテーブルストライプを適用できます。 <code>:has()もっと高度な機能が必要ですか？テーブルに少なくとも特定の数の列がある場合にのみ、これを行うこともできます。

テンプレート

から条件付きクラスロジックを削除します

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

ログイン後にコピー

ページにあるものに基づいてページレイアウトを変更する必要があることがよくあります。次のグリッドレイアウトを例にとると、メインコンテンツの位置は、サイドバーが存在するかどうかに応じてグリッド領域を変更します。

これは、兄弟ページがCMSに設定されているかどうかによって異なります。私は通常、テンプレートロジックを使用して、両方のレイアウトに合わせてレイアウトラッパーにBEM修飾子クラスを条件付きで追加します。 CSSはこのように見えるかもしれません（レスポンシブルールやその他のコンテンツは簡潔に省略されています）：

もちろん、CSSの観点からは、これはまったく問題ありません。しかし、これにより、テンプレートコードが少し面倒になります。テンプレート言語に応じて、特に多くの子供の要素で同じことをしなければならない場合、条件付きでたくさんのクラスを追加することは非常に醜くなります。

これを

table:has(:is(td, th):nth-child(3)) {
  /* 只有在有三列或更多列时才执行操作 */
}

ログイン後にコピー

：

に基づいたメソッドと比較します

正直なところ、CSSの観点からは、これはそれほど良くありません。しかし、私の意見では、HTMLテンプレートから条件付き修飾子クラスを削除することは良い利益です。 :has() たとえば、画像がカードに含まれている場合、

- のマイクロデザインの決定について考えるのは簡単ですが、これらのマクロレイアウトの変更にも非常に役立つと思います。

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page--with-sidebar {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar {
  grid-template-areas: '. m m m m m m m m m . .';
}

ログイン後にコピー

より良い特定の管理

以前の記事を読むと、私が特異性が持続していることがわかります。あなたが私のようであり、スタイル全体に:has()と

を追加するときに特定のスコアを急増させたくない場合は、必ず