From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_has/index.html | 61 ++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 files/ja/web/css/_colon_has/index.html (limited to 'files/ja/web/css/_colon_has') diff --git a/files/ja/web/css/_colon_has/index.html b/files/ja/web/css/_colon_has/index.html new file mode 100644 index 0000000000..4579b2c8f4 --- /dev/null +++ b/files/ja/web/css/_colon_has/index.html @@ -0,0 +1,61 @@ +--- +title: ':has()' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Reference + - セレクター + - リファレンス + - 擬似クラス +translation_of: 'Web/CSS/:has' +--- +
{{CSSRef}}
+ +

:has() は CSS の疑似クラスで、引数として渡されたセレクターに (指定された要素の {{cssxref(":scope")}} の相対で) 該当する要素が一つ以上の要素に一致することを表します。

+ +

:has() 疑似クラスは、セレクターの相対的なリストを引数に取ります。 CSS Selectors Level 4 仕様書よりも前の版では、 :has はスタイルシート内で使用することができず、 {{domxref("document.querySelector()")}} のような関数でのみ利用することができるという制限がありました (性能上の問題です)。そのように実装するブラウザーはなかったので、この制限は撤廃されました。

+ +
/* <img> 要素を直接中に含む <a> を選択する */
+/* なお、これはまだブラウザーが対応していません */
+var test = document.querySelector('a:has(> img)');
+ +

構文

+ +
{{CSSSyntax}}
+ +

例

+ +

次のセレクターは、 {{HTMLElement("img")}} を直接子に持つ {{HTMLElement("a")}} 要素のみに一致します。

+ +
a:has(> img)
+
+ +

次のセレクターは、直後に {{htmlelement("p")}} 要素を持つ {{HTMLElement("h1")}} 要素のみに一致します。

+ +
h1:has(+ p)
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#relational", ":has()")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.has")}}

-- cgit v1.2.3-54-g00ecf