From dd01772cec3fb0621aa5ac9aba6639d6a1f2d255 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 23:52:34 +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-of-type/index.md | 128 +++++++++++--------------- 1 file changed, 54 insertions(+), 74 deletions(-) diff --git a/files/ja/web/css/_colon_only-of-type/index.md b/files/ja/web/css/_colon_only-of-type/index.md index 879750cecf..649f2e4f6c 100644 --- a/files/ja/web/css/_colon_only-of-type/index.md +++ b/files/ja/web/css/_colon_only-of-type/index.md @@ -1,95 +1,75 @@ --- title: ':only-of-type' -slug: 'Web/CSS/:only-of-type' +slug: Web/CSS/:only-of-type tags: - CSS - - Layout - - Pseudo-class - - Reference - - Web + - レイアウト + - 擬似クラス + - リファレンス - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:only-of-type' + - ウェブ +browser-compat: css.selectors.only-of-type +translation_of: Web/CSS/:only-of-type --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の :only-of-type 疑似クラスは、同じ型の兄弟要素がない要素を表します。

+[CSS](/ja/docs/Web/CSS) の **`:only-of-type`** [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)は、同じ型の兄弟要素がない要素を表します。 -
/* 親の唯一の子の <p> である <p> 要素をすべて選択 */
+```
+/* 
 が親の中にある唯一の 
 出逢った場合に選択 */
 p:only-of-type {
   background-color: lime;
-}
+} +``` -
-

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

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 + +### 同じ型の兄弟がない要素をスタイル付け -

HTML

+#### HTML -
<main>
-  <div>I am `div` #1.</div>
-  <p>I am the only `p` among my siblings.</p>
-  <div>I am `div` #2.</div>
-  <div>I am `div` #3.
-    <i>I am the only `i` child.</i>
-    <em>I am `em` #1.</em>
-    <em>I am `em` #2.</em>
-  </div>
-</main>
-
+```html +
+
I am `div` #1.
+

I am the only `p` among my siblings.

+
I am `div` #2.
+
I am `div` #3. + I am the only `i` child. + I am `em` #1. + I am `em` #2. +
+
+``` -

CSS

+#### CSS -
main :only-of-type {
+```css
+main :only-of-type {
   color: red;
 }
-
- -

結果

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザー実装状況

- -
-

{{Compat("css.selectors.only-of-type")}}

-
- -

関連項目

- - +``` + +#### 結果 + +{{EmbedLiveSample('Styling_elements_with_no_siblings_of_the_same_type','100%',180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref(":only-child")}} +- {{Cssxref(":first-of-type")}} +- {{Cssxref(":last-of-type")}} +- {{Cssxref(":nth-of-type")}} -- cgit v1.2.3-54-g00ecf