From b25bc3d0b656ae56fdd9277af12c1cb60017267a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 21:58:53 +0900 Subject: ツリー構造擬似クラスを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_only-child/index.html | 138 -------------------------- files/ja/web/css/_colon_only-child/index.md | 138 ++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 138 deletions(-) delete mode 100644 files/ja/web/css/_colon_only-child/index.html create mode 100644 files/ja/web/css/_colon_only-child/index.md (limited to 'files/ja/web/css/_colon_only-child') diff --git a/files/ja/web/css/_colon_only-child/index.html b/files/ja/web/css/_colon_only-child/index.html deleted file mode 100644 index fca7c61160..0000000000 --- a/files/ja/web/css/_colon_only-child/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: ':only-child' -slug: 'Web/CSS/:only-child' -tags: - - CSS - - ウェブ - - セレクター - - リファレンス - - レイアウト - - 擬似クラス -translation_of: 'Web/CSS/:only-child' ---- -
{{CSSRef}}
- -

CSS の :only-child 疑似クラスは、兄弟要素がない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1) と同じですが、詳細度はより低くなります。

- -
/* 親の唯一の子である <p> 要素をすべて選択 */
-p:only-child {
-  background-color: lime;
-}
- -
-

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

-
- -

構文

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<div>
-  <div>I am an only child.</div>
-</div>
-
-<div>
-  <div>I am the 1st sibling.</div>
-  <div>I am the 2nd sibling.</div>
-  <div>I am the 3rd sibling, <div>but this is an only child.</div></div>
-</div>
-
- -

CSS

- -
div:only-child {
-  color: red;
-}
-
-div {
-  display: inline-block;
-  margin: 6px;
-  outline: 1px solid;
-}
-
- -

結果

- -

{{EmbedLiveSample('Basic_example','100%',180)}}

- -

リストの例

- -

HTML

- -
<ol>
-  <li>First
-    <ul>
-      <li>This list has just one element.</li>
-    </ul>
-  </li>
-  <li>Second
-    <ul>
-      <li>This list has three elements.</li>
-      <li>This list has three elements.</li>
-      <li>This list has three elements.</li>
-    </ul>
-  </li>
-</ol>
-
- -

CSS

- -
li li {
-  list-style-type: disc;
-}
-
-li:only-child {
-  color: red;
-  list-style-type: square;
-}
- -

結果

- -

{{EmbedLiveSample('A_list_example', '100%', 210)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}初回定義
- -

ブラウザーの互換性

- -
-
-

{{Compat("css.selectors.only-child")}}

-
-
- -

関連項目

- - diff --git a/files/ja/web/css/_colon_only-child/index.md b/files/ja/web/css/_colon_only-child/index.md new file mode 100644 index 0000000000..fca7c61160 --- /dev/null +++ b/files/ja/web/css/_colon_only-child/index.md @@ -0,0 +1,138 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 擬似クラス +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

CSS の :only-child 疑似クラスは、兄弟要素がない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1) と同じですが、詳細度はより低くなります。

+ +
/* 親の唯一の子である <p> 要素をすべて選択 */
+p:only-child {
+  background-color: lime;
+}
+ +
+

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <div>I am an only child.</div>
+</div>
+
+<div>
+  <div>I am the 1st sibling.</div>
+  <div>I am the 2nd sibling.</div>
+  <div>I am the 3rd sibling, <div>but this is an only child.</div></div>
+</div>
+
+ +

CSS

+ +
div:only-child {
+  color: red;
+}
+
+div {
+  display: inline-block;
+  margin: 6px;
+  outline: 1px solid;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example','100%',180)}}

+ +

リストの例

+ +

HTML

+ +
<ol>
+  <li>First
+    <ul>
+      <li>This list has just one element.</li>
+    </ul>
+  </li>
+  <li>Second
+    <ul>
+      <li>This list has three elements.</li>
+      <li>This list has three elements.</li>
+      <li>This list has three elements.</li>
+    </ul>
+  </li>
+</ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

結果

+ +

{{EmbedLiveSample('A_list_example', '100%', 210)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ +
+
+

{{Compat("css.selectors.only-child")}}

+
+
+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf