From d30cae5555b0a7fd10c7d1059531e903fc4d2cc8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 09:56:16 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_defined/index.md | 48 +++++++++++++++----------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/files/ja/web/css/_colon_defined/index.md b/files/ja/web/css/_colon_defined/index.md index 2c3884160d..a3f4eec448 100644 --- a/files/ja/web/css/_colon_defined/index.md +++ b/files/ja/web/css/_colon_defined/index.md @@ -4,17 +4,17 @@ slug: 'Web/CSS/:defined' tags: - CSS - HTML - - Layout - - Pseudo-class - - Reference - - Web + - レイアウト + - 擬似クラス + - リファレンス + - ウェブ - セレクター - 擬似クラス translation_of: 'Web/CSS/:defined' --- -
{{ CSSRef }}
+{{ CSSRef }} -

CSS の :defined 擬似クラスは、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。

+[CSS](/ja/docs/Web/CSS) の ``:defined`` [擬似クラス](/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes)は、定義されているすべての要素を表します。これにはブラウザーに組み込まれたすべての標準要素と、 ({{domxref("CustomElementRegistry.define()")}} メソッドを使用して) 定義に成功したカスタム要素が含まれます。 
/* 定義されたすべての要素を選択 */
 :defined {
@@ -27,13 +27,13 @@ simple-custom:defined {
 }
-

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

この最初の例は <simple-custom> カスタム要素を定義するスクリプトを含んでいます。

+この最初の例は `<simple-custom>` [カスタム要素](/ja/docs/Web/Web_Components/Using_custom_elements)を定義するスクリプトを含んでいます。 
customElements.define('simple-custom',
   class extends HTMLElement {
@@ -48,13 +48,13 @@ simple-custom:defined {
   }
 })
-

次に、 <simple-custom> 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。

+次に、 `<simple-custom>` 要素と標準の {{htmlelement("p")}} 要素のインスタンスがある HTML です。 
<simple-custom text="Custom element example text"></simple-custom>
 
 <p>Standard paragraph example text</p>
-

それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 :defined セレクターを使用して定義された要素テキストをすべて斜体で表示します。

+それでは CSS です。ここでは、要素の種類に基づいて背景色を定義し、カスタム要素の不透明度を定義済みであるかどうかによって変更し、 `:defined` セレクターを使用して定義された要素テキストをすべて斜体で表示します。 
/* 2つの要素を背景で区別できるようにする */
 p {
@@ -71,7 +71,7 @@ simple-custom {
   font-style: italic;
 }
-

それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。

+それから、カスタム要素が定義されていないときには非表示にするルールと、定義されていたらブロックレベル要素として定義して表示します。 
simple-custom:not(:defined) {
   opacity: 0;
@@ -82,15 +82,15 @@ simple-custom:defined {
   text-decoration: underline;
 }
-

これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

+これは、複雑なカスタム要素があってページの読み込みを待ちたいときに便利です。定義が完了するまで要素のインスタンスを非表示にして、ページ上でスタイル適用前の醜い要素が一瞬現れるのを防ぐことができます。

結果

-

以上のコードを実行した結果は次の通りです。

+以上のコードを実行した結果は次の通りです。 -

{{EmbedLiveSample('Examples')}}

+{{EmbedLiveSample('Examples')}} -

仕様書

+## 仕様書 @@ -111,15 +111,13 @@ simple-custom:defined {

ブラウザーの対応

-

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

+このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 [https://github.com/mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) をチェックアウトしてプルリクエストを送信してください。 -

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

+{{Compat("css.selectors.defined")}} -

関連情報

+## 関連情報 - +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{cssxref(":host")}} +- {{cssxref(":host()")}} +- {{cssxref(":host-context()")}} -- cgit v1.2.3-54-g00ecf