素晴らしい開発者の皆さん、こんにちは!この投稿では、 :has()
次の Web プロジェクトで。 :has()
は比較的新しいものですが、UI 内のさまざまな要素を制御できるため、フロントエンド コミュニティで人気を集めています。疑似クラスとは何か、そしてそれをどのように利用できるかを見てみましょう。
構文
:has()
CSS 疑似クラスは、要素内で検索しているものが見つかって考慮された場合に、要素のスタイルを設定するのに役立ちます。こう言っているようなものです、 「このボックスの中に何か特別なものがある場合は、ボックスのスタイルをこのようにし、かつこのようにしてください。」
:has(<direct-selector>) {
/* ... */
}
スタイルの問題
過去何年もの間、CSS を使用して親の直接の子に基づいて親要素をスタイル設定したり、別の要素に基づいて要素をスタイル設定したりする方法はありませんでした。これを行う必要がある場合は、JavaScript を使用し、HTML の構造に基づいてクラスのオン/オフを切り替える必要があります。 :has()
その問題を解決しました。
見出しレベル 1 要素 (h1
) これはブログ リスト ページの投稿のタイトルまたはそれに類するもので、見出しレベル 2 (h2
) に直接続きます。この h2 は投稿の小見出しになる可能性があります。もしそうなら h2
存在し、重要であり、その直後に h1
、その h1 を目立たせるとよいでしょう。以前は、JS 関数を作成する必要がありました。
オールドスクールのやり方 – JavaScript
const h1Elements = document.querySelectorAll('h1');
h1Elements.forEach((h1) => {
const h2Sibling = h1.nextElementSibling;
if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
h1.classList.add('highlight-content');
}
});
この JS 関数は、 h2
それを進めて、ハイライトコンテンツのクラスを適用して、 h1
重要な記事として目立つようになります。
最新の CSS が新しく追加され、改良されました。ブラウザーで実行できる機能は大幅に進歩しました。従来は JavaScript で行う必要があったことを、CSS を利用してすべてではなく一部で実行できるようになりました。
新しい学校のやり方 – CSS
h1:has(+ h2) {
color: blue;
}
:has() を追加してみよう!
今すぐ使用できます :has()
JS 関数と同じことを実現します。この CSS は h1 をチェックし、 兄弟コンビネータ 直後に続く h2 をチェックし、テキストに青の色を追加します。以下にいくつかの使用例を示します。 :has()
重宝します。
:has セレクターの例 1
HTML
<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
<h1>This is a test</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
CSS
h1:has(+ h2) {
color: blue;
}
:has セレクターの例 2
多くの場合、Web 上で作業する私たちは画像を操作したり、画像を操作したりします。私たちは次のようなツールを使用している可能性があります 曇り 画像にさまざまな変換を利用できますが、通常はドロップ シャドウ、境界線の半径、およびキャプションを追加する必要があります (alt 属性の代替テキストと混同しないでください)。
以下の例では、 :has()
図または画像に figcaption 要素があるかどうかを確認し、ある場合は背景と境界線の半径を適用して画像を目立たせることができます。
HTML
<section>
<figure>
<img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
<figcaption>My Aunt Sally's Doggo</figcaption>
</figure>
</section>
CSS
figure:has(figcaption) {
background: #c3baba;
padding: 0.6rem;
max-width: 50%;
border-radius: 5px;
}
:has()
その?
私はできますか あなたはそれを見ることができます :has()
最新のブラウザ間で優れたサポートを提供します。
このブラウザのサポートデータは 使ってもいいですか、詳細があります。 数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示します。
デスクトップ
クロム | Firefoxの | IE | エッジ(Edge) | Safari |
---|---|---|---|---|
105 | 121 | いいえ | 105 | 15.4 |
モバイル/タブレット
Android Chrome | AndroidのFirefoxの | Android | iOSのSafariの |
---|---|---|---|
122 | 123 | 122 | 15.4 |
:has()
コミュニティの中で!
Twitter で自分のネットワークに連絡して、同僚がどのように使用しているかを確認しました。 :has()
日々の仕事の中で、彼らはそれについてこう言わなければなりませんでした。
svg:has(> #Mail) {
stroke-width: 1;
}
コミュニティのメンバーが現実世界の問題を解決するために最新の CSS をどのように使用しているかを見るのは素晴らしいことです。また、アビーがアクセシビリティの理由で CSS を使用していることに感謝します。
心に留めるもの
使用する際に注意すべき重要なポイントがいくつかあります :has()
参照元の箇条書き MDN。
- 疑似クラスは、引数内の最も具体的なセレクターの特異性を引き継ぎます。
- Status
:has()
疑似クラス自体はブラウザではサポートされていないため、セレクター ブロック全体が失敗します。:has()
のような寛容なセレクターリストにあります。:is()
および:where()
-
:has()
疑似クラスを別の疑似クラス内にネストすることはできません:has()
- 疑似要素も有効なセレクターではありません。
:has()
および疑似要素は有効なアンカーではありません:has()
まとめ
などの高度な機能を含む CSS の力を活用します。 :has()
疑似クラスを使用すると、優れた Web エクスペリエンスを作成できるようになります。 CSS の強みはそのカスケード性と特異性にあり、その最大の部分により、CSS の可能性を最大限に活用できるようになります。 CSS の機能を活用することで、Web デザインと開発を前進させ、新たな可能性を解き放ち、画期的なユーザー インターフェイスを作成できます。
リンク:
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- PlatoData.Network 垂直生成 Ai。 自分自身に力を与えましょう。 こちらからアクセスしてください。
- プラトアイストリーム。 Web3 インテリジェンス。 知識増幅。 こちらからアクセスしてください。
- プラトンESG。 カーボン、 クリーンテック、 エネルギー、 環境、 太陽、 廃棄物管理。 こちらからアクセスしてください。
- プラトンヘルス。 バイオテクノロジーと臨床試験のインテリジェンス。 こちらからアクセスしてください。
- 情報源: https://css-tricks.com/the-power-of-has-in-css/
- :持っている
- :は
- :not
- $UP
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 31
- 3
- 7
- 8
- 9
- 91
- 98
- a
- 私たちについて
- それについて
- 接近性
- 会計処理
- 達成する
- 越えて
- Ad
- 加えます
- 追加
- 高度な
- 利点
- 後
- に対して
- すべて
- 許可
- また
- 代替案
- an
- 固着
- および
- アンドロイド
- 別の
- どれか
- 適用
- 適用
- です
- 引数
- 記事
- AS
- At
- 背景
- ベース
- BE
- なぜなら
- 以下
- BEST
- ブロック
- ブログ
- 青
- 国境
- ボックス
- ブラウザ
- ブラウザ
- 建物
- 焙煎が極度に未発達や過発達のコーヒーにて、クロロゲン酸の味わいへの影響は強くなり、金属を思わせる味わいと乾いたマウスフィールを感じさせます。
- by
- 缶
- 機能
- キャプションが
- 滝
- 例
- チャンス
- 点検
- 子
- クロム
- class
- クラス
- カラー
- 来ます
- 到来
- コミュニティ
- 結論
- 混乱
- コントロール
- 可能性
- カップル
- クラフト
- 作成
- CSS
- データ
- 中
- 日々
- 配信する
- 設計
- 詳細
- 検出
- 開発者
- 開発
- DID
- 直接
- 直接に
- do
- ドキュメント
- ありません
- 犬
- ドライブ
- Drop
- エッジ(Edge)
- 素子
- 要素は
- 受け入れ
- 力を与える
- end
- 全体
- すべてのもの
- 例
- 例外的
- エクスペリエンス
- 説明
- 探る
- フェイル
- 特徴
- 特徴
- 少数の
- フィギュア
- もう完成させ、ワークスペースに掲示しましたか?
- Firefoxの
- フォロー中
- 次
- フード
- フォワード
- 発見
- から
- フロント
- フロントエンド
- フル
- function
- 機能的な
- 機能性
- 獲得
- 行く
- ゴールデン
- 素晴らしい
- 画期的な
- 持っていました
- ハンディ
- 持ってる
- 見出し
- ことができます
- ハイ
- 強調表示
- 認定条件
- HTML
- HTTP
- HTTPS
- i
- ie
- if
- 画像
- 画像
- 直ちに
- 重要
- 改善されました
- in
- 含めて
- を示し
- 内部
- インターフェース
- に
- iOS
- IT
- ITS
- 自体
- JavaScriptを
- キープ
- キー
- 姓
- 最低
- レベル
- 活用します
- リー
- ような
- リスト
- 長い
- 見て
- 探して
- たくさん
- make
- 操作する
- 一致
- 最大幅
- メンバー
- かもしれない
- マインド
- モダン
- 他には?
- 最も
- モジラ
- my
- 自然
- 必要
- 必要とされる
- ネットワーク
- 新作
- 次の
- いいえ
- 今
- 数
- of
- on
- ONE
- の
- or
- 私たちの
- でる
- が
- パッケージ
- ページ
- 部
- パーティー
- 渡された
- 過去
- ピア
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- ポイント
- 人気
- の可能性
- ポスト
- 潜在的な
- 電力
- 現在
- プレゼント
- 前
- 問題
- 問題
- プロジェクト
- は、大阪で
- 達した
- リアル
- 現実の世界
- 参照
- 参照
- 相対
- 相対的に
- 表し
- 尊重
- 堅牢な
- s
- Safari
- 安全性
- 同じ
- 言う
- 格言
- 学校
- 検索
- 選択
- 座る
- So
- 溶液
- 解決する
- 一部
- 何か
- 特定の
- 特異性
- スタンド
- 米国
- 強み
- 構造
- そのような
- サポート
- サポート
- サポート
- SVG
- 構文
- 取る
- 取り
- 取得
- テクノロジー
- 클라우드 기반 AI/ML및 고성능 컴퓨팅을 통한 디지털 트윈의 기초 – Edward Hsu, Rescale CPO 많은 엔지니어링 중심 기업에게 클라우드는 R&D디지털 전환의 첫 단계일 뿐입니다. 클라우드 자원을 활용해 엔지니어링 팀의 제약을 해결하는 단계를 넘어, 시뮬레이션 운영을 통합하고 최적화하며, 궁극적으로는 모델 기반의 협업과 의사 결정을 지원하여 신제품을 결정할 때 데이터 기반 엔지니어링을 적용하고자 합니다. Rescale은 이러한 혁신을 돕기 위해 컴퓨팅 추천 엔진, 통합 데이터 패브릭, 메타데이터 관리 등을 개발하고 있습니다. 이번 자리를 빌려 비즈니스 경쟁력 제고를 위한 디지털 트윈 및 디지털 스레드 전략 개발 방법에 대한 인사이트를 나누고자 합니다.
- それ
- アプリ環境に合わせて
- その後
- 彼ら
- もの
- 物事
- この
- 時間
- <font style="vertical-align: inherit;">回数</font>
- 役職
- 〜へ
- 豊富なツール群
- 伝統的に
- 変換
- ツリー
- true
- ターニング
- さえずり
- ui
- ない限り、
- ロック解除
- us
- つかいます
- 中古
- ユーザー
- 通常
- 活用する
- 有効な
- さまざまな
- バージョン
- 詳しく見る
- vs
- 欲しいです
- ました
- 仕方..
- we
- ウェブ
- した
- この試験は
- いつ
- which
- 意志
- 以内
- 素晴らしい
- 仕事
- 労働者
- ワーキング
- 世界
- でしょう
- 書きます
- 年
- まだ
- You
- あなたの
- ゼファーネット