From 371658b939e34e4a66673e9d65f405edcdc1d28e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 23:06:31 +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_only-child/index.md | 164 ++++++++++++---------------- 1 file changed, 72 insertions(+), 92 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_only-child/index.md b/files/ja/web/css/_colon_only-child/index.md index fca7c61160..ec6835d20c 100644 --- a/files/ja/web/css/_colon_only-child/index.md +++ b/files/ja/web/css/_colon_only-child/index.md @@ -1,52 +1,55 @@ --- title: ':only-child' -slug: 'Web/CSS/:only-child' +slug: Web/CSS/:only-child tags: - CSS - - ウェブ - - セレクター - - リファレンス - レイアウト - 擬似クラス -translation_of: 'Web/CSS/:only-child' + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.only-child +translation_of: Web/CSS/:only-child --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:only-child`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素がない要素を表します。 `:first-child:last-child` または `:nth-child(1):nth-last-child(1)` と同じですが、詳細度はより低くなります。 -
/* 親の唯一の子である <p> 要素をすべて選択 */
+```css
+/* 親の唯一の子である 
 要素をすべて選択 */
 p:only-child {
   background-color: lime;
-}
+} +``` -
-

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

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

基本的な例

+### 基本的な例 -

HTML

+#### HTML -
<div>
-  <div>I am an only child.</div>
-</div>
+```html
+

+  
I am an only child.

+

 
-<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>
-
+
+
I am the 1st sibling.
+
I am the 2nd sibling.
+
I am the 3rd sibling,
but this is an only child.
+
+``` -

CSS

+#### CSS -
div:only-child {
+```css
+div:only-child {
   color: red;
 }
 
@@ -55,84 +58,61 @@ div {
   margin: 6px;
   outline: 1px solid;
 }
-
+``` -

結果

+#### 結果 -

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

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

リストの例

+### リストの例 -

HTML

+#### 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>
-
+```html +
    +
  1. First +
      +
    • This list has just one element.
      • +
    +
    2. +
  2. Second +
      +
    • This list has three elements.
      • +
    • This list has three elements.
      • +
    • This list has three elements.
      • +
    +
    3. +
+``` -

CSS

+#### CSS -
li li {
+```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")}}

-
-
+#### 結果 + +{{EmbedLiveSample('A_list_example', '100%', 210)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連項目

+## 関連情報 - +- {{Cssxref(":only-of-type")}} +- {{Cssxref(":first-child")}} +- {{Cssxref(":last-child")}} +- {{Cssxref(":nth-child")}} -- cgit v1.2.3-54-g00ecf