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_empty/index.html | 114 ------------ files/ja/web/css/_colon_empty/index.md | 114 ++++++++++++ files/ja/web/css/_colon_first-child/index.html | 132 -------------- files/ja/web/css/_colon_first-child/index.md | 132 ++++++++++++++ files/ja/web/css/_colon_first-of-type/index.html | 112 ------------ files/ja/web/css/_colon_first-of-type/index.md | 112 ++++++++++++ files/ja/web/css/_colon_last-child/index.html | 127 ------------- files/ja/web/css/_colon_last-child/index.md | 127 +++++++++++++ files/ja/web/css/_colon_last-of-type/index.html | 110 ----------- files/ja/web/css/_colon_last-of-type/index.md | 110 +++++++++++ files/ja/web/css/_colon_nth-child/index.html | 201 --------------------- files/ja/web/css/_colon_nth-child/index.md | 201 +++++++++++++++++++++ files/ja/web/css/_colon_nth-last-child/index.html | 193 -------------------- files/ja/web/css/_colon_nth-last-child/index.md | 193 ++++++++++++++++++++ .../ja/web/css/_colon_nth-last-of-type/index.html | 94 ---------- files/ja/web/css/_colon_nth-last-of-type/index.md | 94 ++++++++++ files/ja/web/css/_colon_nth-of-type/index.html | 110 ----------- files/ja/web/css/_colon_nth-of-type/index.md | 110 +++++++++++ files/ja/web/css/_colon_only-child/index.html | 138 -------------- files/ja/web/css/_colon_only-child/index.md | 138 ++++++++++++++ files/ja/web/css/_colon_only-of-type/index.html | 95 ---------- files/ja/web/css/_colon_only-of-type/index.md | 95 ++++++++++ files/ja/web/css/_colon_root/index.html | 63 ------- files/ja/web/css/_colon_root/index.md | 63 +++++++ 24 files changed, 1489 insertions(+), 1489 deletions(-) delete mode 100644 files/ja/web/css/_colon_empty/index.html create mode 100644 files/ja/web/css/_colon_empty/index.md delete mode 100644 files/ja/web/css/_colon_first-child/index.html create mode 100644 files/ja/web/css/_colon_first-child/index.md delete mode 100644 files/ja/web/css/_colon_first-of-type/index.html create mode 100644 files/ja/web/css/_colon_first-of-type/index.md delete mode 100644 files/ja/web/css/_colon_last-child/index.html create mode 100644 files/ja/web/css/_colon_last-child/index.md delete mode 100644 files/ja/web/css/_colon_last-of-type/index.html create mode 100644 files/ja/web/css/_colon_last-of-type/index.md delete mode 100644 files/ja/web/css/_colon_nth-child/index.html create mode 100644 files/ja/web/css/_colon_nth-child/index.md delete mode 100644 files/ja/web/css/_colon_nth-last-child/index.html create mode 100644 files/ja/web/css/_colon_nth-last-child/index.md delete mode 100644 files/ja/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/ja/web/css/_colon_nth-last-of-type/index.md delete mode 100644 files/ja/web/css/_colon_nth-of-type/index.html create mode 100644 files/ja/web/css/_colon_nth-of-type/index.md delete mode 100644 files/ja/web/css/_colon_only-child/index.html create mode 100644 files/ja/web/css/_colon_only-child/index.md delete mode 100644 files/ja/web/css/_colon_only-of-type/index.html create mode 100644 files/ja/web/css/_colon_only-of-type/index.md delete mode 100644 files/ja/web/css/_colon_root/index.html create mode 100644 files/ja/web/css/_colon_root/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_empty/index.html b/files/ja/web/css/_colon_empty/index.html deleted file mode 100644 index b54bdf4518..0000000000 --- a/files/ja/web/css/_colon_empty/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ':empty' -slug: 'Web/CSS/:empty' -tags: - - CSS - - Layout - - NeedsUpdate - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:empty' ---- -
{{CSSRef}}
- -

:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の {{cssxref("content")}} は要素が空であるかどうかの判断には影響しません。

- -
-

注: {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 :empty 擬似クラスは {{CSSxRef(":-moz-only-whitespace")}} のような動作に変更されましたが、現在これに対応しているブラウザーはありません。

-
- -
/* 内容を含まない <div> 要素を選択 */
-div:empty {
-  background: lime;
-}
- -

構文

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<div class="box"><!-- I will be lime. --></div>
-<div class="box">I will be pink.</div>
-<div class="box">
-	<!-- I will be pink in older browsers because of the whitespace around this comment. -->
-</div>
-<div class="box">
-	<p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
-</div>
-
- -

CSS

- - - -
.box {
-  background: pink;
-  height: 80px;
-  width: 80px;
-}
-
-.box:empty {
-  background: lime;
-}
- -

結果

- -

{{EmbedLiveSample("Examples", 300, 80)}}

- -

アクセシビリティの考慮

- -

読み上げソフトのような支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である accessibility tree で使用されます。

- -

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS4 Selectors")}}{{CSSxRef(":-moz-only-whitespace")}} のような動作に変更
{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS3 Selectors")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_empty/index.md b/files/ja/web/css/_colon_empty/index.md new file mode 100644 index 0000000000..b54bdf4518 --- /dev/null +++ b/files/ja/web/css/_colon_empty/index.md @@ -0,0 +1,114 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Layout + - NeedsUpdate + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{CSSRef}}
+ +

:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の {{cssxref("content")}} は要素が空であるかどうかの判断には影響しません。

+ +
+

注: {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} では、 :empty 擬似クラスは {{CSSxRef(":-moz-only-whitespace")}} のような動作に変更されましたが、現在これに対応しているブラウザーはありません。

+
+ +
/* 内容を含まない <div> 要素を選択 */
+div:empty {
+  background: lime;
+}
+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<div class="box"><!-- I will be lime. --></div>
+<div class="box">I will be pink.</div>
+<div class="box">
+	<!-- I will be pink in older browsers because of the whitespace around this comment. -->
+</div>
+<div class="box">
+	<p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
+</div>
+
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample("Examples", 300, 80)}}

+ +

アクセシビリティの考慮

+ +

読み上げソフトのような支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である accessibility tree で使用されます。

+ +

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS4 Selectors")}}{{CSSxRef(":-moz-only-whitespace")}} のような動作に変更
{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty 擬似クラス")}}{{Spec2("CSS3 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_first-child/index.html b/files/ja/web/css/_colon_first-child/index.html deleted file mode 100644 index e7f9680e4d..0000000000 --- a/files/ja/web/css/_colon_first-child/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: ':first-child' -slug: 'Web/CSS/:first-child' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:first-child' ---- -
{{CSSRef}}
- -

:first-child は CSS の擬似クラスで、兄弟要素のグループの中で最初の要素を表します。

- -
/* 兄弟要素の中で最初の <p> を
-   すべてを選択 */
-p:first-child {
-  color: lime;
-}
- -
-

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

-
- -

構文

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<div>
-  <p>This text is selected!</p>
-  <p>This text isn't selected.</p>
-</div>
-
-<div>
-  <h2>This text isn't selected: it's not a `p`.</h2>
-  <p>This text isn't selected.</p>
-</div>
-
- -

CSS

- -
p:first-child {
-  color: lime;
-  background-color: black;
-  padding: 5px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Basic_example', 500, 200)}}

- -

リストのスタイル付け

- -

HTML

- -
<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3
-    <ul>
-      <li>Item 3.1</li>
-      <li>Item 3.2</li>
-      <li>Item 3.3</li>
-    </ul>
-  </li>
-</ul>
- -

CSS

- -
ul li {
-  color: blue;
-}
-
-ul li:first-child {
-  color: red;
-  font-weight: bold;
-}
- -

結果

- -

{{EmbedLiveSample('Styling_a_list')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_first-child/index.md b/files/ja/web/css/_colon_first-child/index.md new file mode 100644 index 0000000000..e7f9680e4d --- /dev/null +++ b/files/ja/web/css/_colon_first-child/index.md @@ -0,0 +1,132 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

:first-child は CSS の擬似クラスで、兄弟要素のグループの中で最初の要素を表します。

+ +
/* 兄弟要素の中で最初の <p> を
+   すべてを選択 */
+p:first-child {
+  color: lime;
+}
+ +
+

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

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

リストのスタイル付け

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_first-of-type/index.html b/files/ja/web/css/_colon_first-of-type/index.html deleted file mode 100644 index e1ac6114f1..0000000000 --- a/files/ja/web/css/_colon_first-of-type/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ':first-of-type' -slug: 'Web/CSS/:first-of-type' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:first-of-type' ---- -
{{CSSRef}}
- -

CSS の :first-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最初の要素を表します。

- -
/* 兄弟要素の中で最初の <p> 要素をすべて選択 */
-p:first-of-type {
-  color: red;
-}
- -
-

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

-
- -

構文

- -{{csssyntax}} - -

例

- -

最初の段落の整形

- -

HTML

- -
<h2>Heading</h2>
-<p>Paragraph 1</p>
-<p>Paragraph 2</p>
- -

CSS

- -
p:first-of-type {
-  color: red;
-  font-style: italic;
-}
- -

結果

- -

{{EmbedLiveSample('Styling_the_first_paragraph')}}

- -

ネストした要素

- -

この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

- -

HTML

- -
<article>
-  <div>This `div` is first!</div>
-  <div>This <span>nested `span` is first</span>!</div>
-  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
-  <div>This <span>nested `span` gets styled</span>!</div>
-  <b>This `b` qualifies!</b>
-  <div>This is the final `div`.</div>
-</article>
-
- -

CSS

- -
article :first-of-type {
-  background-color: pink;
-}
- -

結果

- -

{{EmbedLiveSample('Nested_elements', 500)}}

- -

仕様書

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

ブラウザー実装状況

- -
-

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

-
- -

関連項目

- - diff --git a/files/ja/web/css/_colon_first-of-type/index.md b/files/ja/web/css/_colon_first-of-type/index.md new file mode 100644 index 0000000000..e1ac6114f1 --- /dev/null +++ b/files/ja/web/css/_colon_first-of-type/index.md @@ -0,0 +1,112 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

CSS の :first-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最初の要素を表します。

+ +
/* 兄弟要素の中で最初の <p> 要素をすべて選択 */
+p:first-of-type {
+  color: red;
+}
+ +
+

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

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

最初の段落の整形

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_the_first_paragraph')}}

+ +

ネストした要素

+ +

この例は、どうやった入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

+ +

HTML

+ +
<article>
+  <div>This `div` is first!</div>
+  <div>This <span>nested `span` is first</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <div>This <span>nested `span` gets styled</span>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

結果

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

仕様書

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

ブラウザー実装状況

+ +
+

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

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_last-child/index.html b/files/ja/web/css/_colon_last-child/index.html deleted file mode 100644 index 56e5ddd649..0000000000 --- a/files/ja/web/css/_colon_last-child/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: ':last-child' -slug: 'Web/CSS/:last-child' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:last-child' ---- -
{{CSSRef}}
- -

:last-child はCSS の擬似クラスで、兄弟要素のグループの中で最後の要素を表します。

- -
/* 兄弟要素の中で最後の <p> を
-   すべてを選択 */
-p:last-child {
-  color: lime;
-}
- -
-

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

-
- -

構文

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<div>
-  <p>This text isn't selected.</p>
-  <p>This text is selected!</p>
-</div>
-
-<div>
-  <p>This text isn't selected.</p>
-  <h2>This text isn't selected: it's not a `p`.</h2>
-</div>
-
- -

CSS

- -
p:last-child {
-  color: lime;
-  background-color: black;
-  padding: 5px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Basic_example', 500, 200)}}

- -

リストのスタイル付け

- -

HTML

- -
<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3
-    <ul>
-      <li>Item 3.1</li>
-      <li>Item 3.2</li>
-      <li>Item 3.3</li>
-    </ul>
-  </li>
-</ul>
- -

CSS

- -
ul li {
-  color: blue;
-}
-
-ul li:last-child {
-  border: 1px solid red;
-  color: red;
-}
- -

結果

- -

{{EmbedLiveSample('Styling_a_list')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_last-child/index.md b/files/ja/web/css/_colon_last-child/index.md new file mode 100644 index 0000000000..56e5ddd649 --- /dev/null +++ b/files/ja/web/css/_colon_last-child/index.md @@ -0,0 +1,127 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

:last-child はCSS の擬似クラスで、兄弟要素のグループの中で最後の要素を表します。

+ +
/* 兄弟要素の中で最後の <p> を
+   すべてを選択 */
+p:last-child {
+  color: lime;
+}
+ +
+

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

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <p>This text isn't selected.</p>
+  <p>This text is selected!</p>
+</div>
+
+<div>
+  <p>This text isn't selected.</p>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+</div>
+
+ +

CSS

+ +
p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

リストのスタイル付け

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_last-of-type/index.html b/files/ja/web/css/_colon_last-of-type/index.html deleted file mode 100644 index 36761d0e73..0000000000 --- a/files/ja/web/css/_colon_last-of-type/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ':last-of-type' -slug: 'Web/CSS/:last-of-type' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:last-of-type' ---- -
{{CSSRef}}
- -

CSS の :last-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最後の要素を表します。

- -
/* 兄弟要素の中で最後の <p> 要素をすべて選択 */
-p:last-of-type {
-  color: lime;
-}
- -
-

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

-
- -

構文

- -{{csssyntax}} - -

例

- -

最後の段落の整形

- -

HTML

- -
<h2>Heading</h2>
-<p>Paragraph 1</p>
-<p>Paragraph 2</p>
- -

CSS

- -
p:last-of-type {
-  color: red;
-  font-style: italic;
-}
- -

結果

- -

{{EmbedLiveSample('Styling_the_last_paragraph')}}

- -

入れ子になった要素

- -

この例は、どうやって入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

- -

HTML

- -
<article>
-  <div>This `div` is first.</div>
-  <div>This <span>nested `span` is last</span>!</div>
-  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
-  <b>This `b` qualifies!</b>
-  <div>This is the final `div`!</div>
-</article>
-
- -

CSS

- -
article :last-of-type {
-  background-color: pink;
-}
- -

結果

- -

{{EmbedLiveSample('Nested_elements', 500)}}

- -

仕様書

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

ブラウザー実装状況

- -
-

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

-
- -

関連項目

- - diff --git a/files/ja/web/css/_colon_last-of-type/index.md b/files/ja/web/css/_colon_last-of-type/index.md new file mode 100644 index 0000000000..36761d0e73 --- /dev/null +++ b/files/ja/web/css/_colon_last-of-type/index.md @@ -0,0 +1,110 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

CSS の :last-of-type 疑似クラスは、兄弟要素のグループの中でその種類の最後の要素を表します。

+ +
/* 兄弟要素の中で最後の <p> 要素をすべて選択 */
+p:last-of-type {
+  color: lime;
+}
+ +
+

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

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

最後の段落の整形

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample('Styling_the_last_paragraph')}}

+ +

入れ子になった要素

+ +

この例は、どうやって入れ子になった要素を対象にするかを示します。なお、単純セレクターが書かれていない場合は、ユニバーサルセレクター (*) が暗黙に含まれています。

+ +

HTML

+ +
<article>
+  <div>This `div` is first.</div>
+  <div>This <span>nested `span` is last</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

結果

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

仕様書

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

ブラウザー実装状況

+ +
+

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

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_nth-child/index.html b/files/ja/web/css/_colon_nth-child/index.html deleted file mode 100644 index bb7351fa96..0000000000 --- a/files/ja/web/css/_colon_nth-child/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: ':nth-child()' -slug: 'Web/CSS/:nth-child' -tags: - - CSS - - Reference - - Selectors - - Web - - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:nth-child' ---- -
{{CSSRef}}
- -

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

- -
/* リスト中の2番目の <li> 要素を選択 */
-li:nth-child(2) {
-  color: lime;
-}
-
-/* 兄弟要素の中で3つおきに
-   要素を選択 */
-:nth-child(4n) {
-  color: lime;
-}
-
- -

構文

- -

nth-child 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。

- -

キーワード値

- -
-
odd
-
一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。
-
even
-
一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。
-
- -

関数表記

- -
-
<An+B>
-
リスト中の位置が、 An+B で定義された数値のパターンと一致する要素を表します。
- A は整数の刻み値です。
- B は整数の加算値です。
- n はすべての正の整数で、0から始まります。
-
リスト中の An+B 番目の要素として読むことができます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

セレクターの例

- -
-
tr:nth-child(odd) 又は tr:nth-child(2n+1)
-
HTML テーブルの奇数行 (1, 3, 5, など) を表します。
-
tr:nth-child(even) または tr:nth-child(2n)
-
HTML テーブルの偶数行 (2, 4, 6, など) を表します。
-
:nth-child(7)
-
7番目の要素を表します。
-
:nth-child(5n)
-
5番目 [=5×1], 10番目 [=5×2], 15番目 [=5×3], 等の要素を表します。最初のものは 0番目 [=5x0] が式の結果として返りますが、 n が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように B の部分が >0 となる場合にもっとよく分かるでしょう。
-
:nth-child(n+7)
-
7番目とそれ以降のすべての要素を表します。 7番目 [=0+7], 8番目 [=1+7], 9番目 [=2+7], 等です。
-
:nth-child(3n+4)
-
4番目 [=(3×0)+4], 7番目 [=(3×1)+4], 10番目 [=(3×2)+4], 13番目 [=(3×3)+4], 等の要素を表します。
-
:nth-child(-n+3)
-
兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]
-
p:nth-child(n)
-
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じ要素を選択します (但し、具体度はより高くなります)。
-
p:nth-child(1) または p:nth-child(0n+1)
-
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (具体度も同じです)。
-
- -
-
p:nth-child(n+8):nth-child(-n+15)
-
兄弟要素のグループの中で8～15番目の <p> 要素を表します。
-
- -

詳細な例

- -

HTML

- -
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
-   <code>&lt;em&gt;</code> among the child elements.</h3>
-<p>Children 1, 3, 5, and 7 are selected.</p>
-<div class="first">
-  <span>Span 1!</span>
-  <span>Span 2</span>
-  <span>Span 3!</span>
-  <span>Span 4</span>
-  <span>Span 5!</span>
-  <span>Span 6</span>
-  <span>Span 7!</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-child(2n+1)</code>, WITH an
-   <code>&lt;em&gt;</code> among the child elements.</h3>
-<p>Children 1, 5, and 7 are selected.<br>
-   3 is used in the counting because it is a child, but it isn't
-   selected because it isn't a <code>&lt;span&gt;</code>.</p>
-<div class="second">
-  <span>Span!</span>
-  <span>Span</span>
-  <em>This is an `em`.</em>
-  <span>Span</span>
-  <span>Span!</span>
-  <span>Span</span>
-  <span>Span!</span>
-  <span>Span</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-of-type(2n+1)</code>, WITH an
-   <code>&lt;em&gt;</code> among the child elements.</h3>
-<p>Children 1, 4, 6, and 8 are selected.<br>
-   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
-   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
-   children of that type. The <code>&lt;em&gt;</code> is completely skipped
-   over and ignored.</p>
-<div class="third">
-  <span>Span!</span>
-  <span>Span</span>
-  <em>This is an `em`.</em>
-  <span>Span!</span>
-  <span>Span</span>
-  <span>Span!</span>
-  <span>Span</span>
-  <span>Span!</span>
-</div>
-
- -

CSS

- -
html {
-  font-family: sans-serif;
-}
-
-span,
-div em {
-  padding: 5px;
-  border: 1px solid green;
-  display: inline-block;
-  margin-bottom: 3px;
-}
-
-.first span:nth-child(2n+1),
-.second span:nth-child(2n+1),
-.third span:nth-of-type(2n+1) {
-  background-color: lime;
-}
- -

結果

- -

{{EmbedLiveSample('Detailed_example', 550, 550)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}<selector> の構文と仕様書に、親を持たない要素も一致するよう追加。
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_nth-child/index.md b/files/ja/web/css/_colon_nth-child/index.md new file mode 100644 index 0000000000..bb7351fa96 --- /dev/null +++ b/files/ja/web/css/_colon_nth-child/index.md @@ -0,0 +1,201 @@ +--- +title: ':nth-child()' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Reference + - Selectors + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

+ +
/* リスト中の2番目の <li> 要素を選択 */
+li:nth-child(2) {
+  color: lime;
+}
+
+/* 兄弟要素の中で3つおきに
+   要素を選択 */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

構文

+ +

nth-child 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。

+ +

キーワード値

+ +
+
odd
+
一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。
+
even
+
一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。
+
+ +

関数表記

+ +
+
<An+B>
+
リスト中の位置が、 An+B で定義された数値のパターンと一致する要素を表します。
+ A は整数の刻み値です。
+ B は整数の加算値です。
+ n はすべての正の整数で、0から始まります。
+
リスト中の An+B 番目の要素として読むことができます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

セレクターの例

+ +
+
tr:nth-child(odd) 又は tr:nth-child(2n+1)
+
HTML テーブルの奇数行 (1, 3, 5, など) を表します。
+
tr:nth-child(even) または tr:nth-child(2n)
+
HTML テーブルの偶数行 (2, 4, 6, など) を表します。
+
:nth-child(7)
+
7番目の要素を表します。
+
:nth-child(5n)
+
5番目 [=5×1], 10番目 [=5×2], 15番目 [=5×3], 等の要素を表します。最初のものは 0番目 [=5x0] が式の結果として返りますが、 n が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように B の部分が >0 となる場合にもっとよく分かるでしょう。
+
:nth-child(n+7)
+
7番目とそれ以降のすべての要素を表します。 7番目 [=0+7], 8番目 [=1+7], 9番目 [=2+7], 等です。
+
:nth-child(3n+4)
+
4番目 [=(3×0)+4], 7番目 [=(3×1)+4], 10番目 [=(3×2)+4], 13番目 [=(3×3)+4], 等の要素を表します。
+
:nth-child(-n+3)
+
兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]
+
p:nth-child(n)
+
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じ要素を選択します (但し、具体度はより高くなります)。
+
p:nth-child(1) または p:nth-child(0n+1)
+
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (具体度も同じです)。
+
+ +
+
p:nth-child(n+8):nth-child(-n+15)
+
兄弟要素のグループの中で8～15番目の <p> 要素を表します。
+
+ +

詳細な例

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}<selector> の構文と仕様書に、親を持たない要素も一致するよう追加。
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_nth-last-child/index.html b/files/ja/web/css/_colon_nth-last-child/index.html deleted file mode 100644 index 224e5d19dc..0000000000 --- a/files/ja/web/css/_colon_nth-last-child/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: ':nth-last-child()' -slug: 'Web/CSS/:nth-last-child' -tags: - - CSS - - ウェブ - - セレクター - - リファレンス - - レイアウト - - 疑似クラス -translation_of: 'Web/CSS/:nth-last-child' ---- -
{{CSSRef}}
- -

CSS の :nth-last-child() 疑似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

- -
/* 兄弟要素の中で、後ろから数えて
-   3つおきに要素を選択 */
-:nth-last-child(4n) {
-  color: lime;
-}
- -
-

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。

-
- -

構文

- -

nth-last-child 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

- -

キーワード値

- -
-
odd
-
一連の兄弟要素の中で、最後から奇数番目の要素 (1, 3, 5, など) を表します。
-
even
-
一連の兄弟要素の中で、最後から偶数番目の要素 (2, 4, 6, など) を表します。
-
- -

関数表記

- -
-
<An+B>
-
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は 1 です。 A と B の値は両方とも {{cssxref("<integer>")}} です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

セレクターの例

- -
-
tr:nth-last-child(odd) または tr:nth-last-child(2n+1)
-
HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。
-
tr:nth-last-child(even) または tr:nth-last-child(2n)
-
HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。
-
:nth-last-child(7)
-
最後から数えて 7 番目の要素を表します。
-
:nth-last-child(5n)
-
最後から数えて 5, 10, 15 番目などの要素を表します。
-
:nth-last-child(3n+4)
-
最後から数えて 4, 7, 10, 13 番目などの要素を表します。
-
:nth-last-child(-n+3)
-
兄弟要素のグループの中で最後の3つの要素を表します。
-
p:nth-last-child(n) 又は p:nth-last-child(n+1)
-
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じです。 (n はゼロから始まるので、最後の要素が1で始まり、 n 及び n+1 が共に同じ要素を選択します。)
-
p:nth-last-child(1) または p:nth-last-child(0n+1)
-
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":last-child")}} セレクターと同じです。
-
- -

詳細な例

- -

HTML

- -
<table>
-  <tbody>
-    <tr>
-      <td>First line</td>
-    </tr>
-    <tr>
-      <td>Second line</td>
-    </tr>
-    <tr>
-      <td>Third line</td>
-    </tr>
-    <tr>
-      <td>Fourth line</td>
-    </tr>
-    <tr>
-      <td>Fifth line</td>
-    </tr>
-  </tbody>
-</table>
-
- -

CSS

- -
table {
-  border: 1px solid blue;
-}
-
-/* 最後から3つの要素を選択 */
-tr:nth-last-child(-n+3) {
-  background-color: pink;
-}
-
-/* 後ろから2番目から最初までの要素を選択 */
-tr:nth-last-child(n+2) {
-  color: blue;
-}
-
-/* 後ろから2番目の要素のみを選択 */
-tr:nth-last-child(2) {
-  font-weight: 600;
-}
-
- -

結果

- -

{{EmbedLiveSample('Table_example', 300, 150)}}

- -

数量クエリ

- -

数量クエリは、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは nth-last-child 疑似クラスと 一般兄弟結合子の機能を組み合わせることで実現できます。

- -

HTML

- -
<h4>4項目のリスト (スタイル付き):</h4>
-<ol>
-  <li>One</li>
-  <li>Two</li>
-  <li>Three</li>
-  <li>Four</li>
-</ol>
-
-<h4>2項目のリスト (スタイルなし):</h4>
-<ol>
-  <li>One</li>
-  <li>Two</li>
-</ol>
- -

CSS

- -
/* 3つ以上のリスト項目がある場合、
-   すべてにスタイル付けする */
-li:nth-last-child(n+3),
-li:nth-last-child(n+3) ~ li {
-  color: red;
-}
- -

結果

- -

{{EmbedLiveSample('Edge_case_example')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も一致するよう追加。
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}初回定義
- -

ブラウザーの対応

- -
-

{{Compat("css.selectors.nth-last-child")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_nth-last-child/index.md b/files/ja/web/css/_colon_nth-last-child/index.md new file mode 100644 index 0000000000..224e5d19dc --- /dev/null +++ b/files/ja/web/css/_colon_nth-last-child/index.md @@ -0,0 +1,193 @@ +--- +title: ':nth-last-child()' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

CSS の :nth-last-child() 疑似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

+ +
/* 兄弟要素の中で、後ろから数えて
+   3つおきに要素を選択 */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-child")}} と同じです。

+
+ +

構文

+ +

nth-last-child 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

+ +

キーワード値

+ +
+
odd
+
一連の兄弟要素の中で、最後から奇数番目の要素 (1, 3, 5, など) を表します。
+
even
+
一連の兄弟要素の中で、最後から偶数番目の要素 (2, 4, 6, など) を表します。
+
+ +

関数表記

+ +
+
<An+B>
+
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は 1 です。 A と B の値は両方とも {{cssxref("<integer>")}} です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

セレクターの例

+ +
+
tr:nth-last-child(odd) または tr:nth-last-child(2n+1)
+
HTML テーブルの最後から数えた奇数行 (1, 3, 5, など) を表します。
+
tr:nth-last-child(even) または tr:nth-last-child(2n)
+
HTML テーブルの最後から数えた偶数行 (2, 4, 6, など) を表します。
+
:nth-last-child(7)
+
最後から数えて 7 番目の要素を表します。
+
:nth-last-child(5n)
+
最後から数えて 5, 10, 15 番目などの要素を表します。
+
:nth-last-child(3n+4)
+
最後から数えて 4, 7, 10, 13 番目などの要素を表します。
+
:nth-last-child(-n+3)
+
兄弟要素のグループの中で最後の3つの要素を表します。
+
p:nth-last-child(n) 又は p:nth-last-child(n+1)
+
兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じです。 (n はゼロから始まるので、最後の要素が1で始まり、 n 及び n+1 が共に同じ要素を選択します。)
+
p:nth-last-child(1) または p:nth-last-child(0n+1)
+
兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":last-child")}} セレクターと同じです。
+
+ +

詳細な例

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>First line</td>
+    </tr>
+    <tr>
+      <td>Second line</td>
+    </tr>
+    <tr>
+      <td>Third line</td>
+    </tr>
+    <tr>
+      <td>Fourth line</td>
+    </tr>
+    <tr>
+      <td>Fifth line</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* 最後から3つの要素を選択 */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* 後ろから2番目から最初までの要素を選択 */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* 後ろから2番目の要素のみを選択 */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Table_example', 300, 150)}}

+ +

数量クエリ

+ +

数量クエリは、要素が存在する数に応じてスタイル付けします。この例では、リストの中に項目が3つ以上ある場合にリスト項目が赤に変わります。これは nth-last-child 疑似クラスと 一般兄弟結合子の機能を組み合わせることで実現できます。

+ +

HTML

+ +
<h4>4項目のリスト (スタイル付き):</h4>
+<ol>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+</ol>
+
+<h4>2項目のリスト (スタイルなし):</h4>
+<ol>
+  <li>One</li>
+  <li>Two</li>
+</ol>
+ +

CSS

+ +
/* 3つ以上のリスト項目がある場合、
+   すべてにスタイル付けする */
+li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Edge_case_example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も一致するよう追加。
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}初回定義
+ +

ブラウザーの対応

+ +
+

{{Compat("css.selectors.nth-last-child")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_nth-last-of-type/index.html b/files/ja/web/css/_colon_nth-last-of-type/index.html deleted file mode 100644 index b1c64d7f60..0000000000 --- a/files/ja/web/css/_colon_nth-last-of-type/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':nth-last-of-type()' -slug: 'Web/CSS/:nth-last-of-type' -tags: - - CSS - - ウェブ - - セレクター - - リファレンス - - レイアウト - - 疑似クラス -translation_of: 'Web/CSS/:nth-last-of-type' ---- -
{{CSSRef}}
- -

CSS の :nth-last-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。

- -
/* 兄弟の <p> 要素の中で、
-   後ろから数えて3つおきに選択 */
-p:nth-last-of-type(4n) {
-  color: lime;
-}
- -
-

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。

-
- -

構文

- -

nth-last-of-type 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

- -

構文の詳しい説明は {{Cssxref(":nth-last-child")}} を参照してください。

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div>
-  <span>This is a span.</span>
-  <span>This is another span.</span>
-  <em>This is emphasized.</em>
-  <span>Wow, this span gets limed!!!</span>
-  <strike>This is struck through.</strike>
-  <span>Here is one last span.</span>
-</div>
- -

CSS

- -
span:nth-last-of-type(2) {
-  background-color: lime;
-}
- -

結果

- -

{{EmbedLiveSample('Example')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザーの対応

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_nth-last-of-type/index.md b/files/ja/web/css/_colon_nth-last-of-type/index.md new file mode 100644 index 0000000000..b1c64d7f60 --- /dev/null +++ b/files/ja/web/css/_colon_nth-last-of-type/index.md @@ -0,0 +1,94 @@ +--- +title: ':nth-last-of-type()' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - ウェブ + - セレクター + - リファレンス + - レイアウト + - 疑似クラス +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

CSS の :nth-last-of-type() 疑似クラスは、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。

+ +
/* 兄弟の <p> 要素の中で、
+   後ろから数えて3つおきに選択 */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

メモ: この疑似クラスは、最初から後に向けてではなく最後から前に向けて数えるという点を除けば、本質的に {{Cssxref(":nth-of-type")}} と同じです。

+
+ +

構文

+ +

nth-last-of-type 疑似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

+ +

構文の詳しい説明は {{Cssxref(":nth-last-child")}} を参照してください。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div>
+  <span>This is a span.</span>
+  <span>This is another span.</span>
+  <em>This is emphasized.</em>
+  <span>Wow, this span gets limed!!!</span>
+  <strike>This is struck through.</strike>
+  <span>Here is one last span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザーの対応

+ +
+

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_nth-of-type/index.html b/files/ja/web/css/_colon_nth-of-type/index.html deleted file mode 100644 index 0344e32b77..0000000000 --- a/files/ja/web/css/_colon_nth-of-type/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ':nth-of-type()' -slug: 'Web/CSS/:nth-of-type' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 擬似クラス -translation_of: 'Web/CSS/:nth-of-type' ---- -
{{CSSRef}}
- -

:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

- -
/* 兄弟の <p> 要素の中で、
-   3つおきに選択 */
-p:nth-of-type(4n) {
-  color: lime;
-}
- -

構文

- -

nth-of-type 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

- -

構文の詳しい説明は {{Cssxref(":nth-child")}} を参照してください。

- -

形式文法

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<div>
-  <div>This element isn't counted.</div>
-  <p>1st paragraph.</p>
-  <p>2nd paragraph.</p>
-  <div>This element isn't counted.</div>
-  <p>3rd paragraph.</p>
-  <p class="fancy">4th paragraph.</p>
-</div>
- -

CSS

- -
/* 奇数の段落 */
-p:nth-of-type(2n+1) {
-  color: red;
-}
-
-/* 偶数の段落 */
-p:nth-of-type(2n) {
-  color: blue;
-}
-
-/* 最初の段落 */
-p:nth-of-type(1) {
-  font-weight: bold;
-}
-
-/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
-p.fancy:nth-of-type(1) {
-  text-decoration: underline;
-}
-
- -

結果

- -

{{EmbedLiveSample('Basic_example', 250, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_nth-of-type/index.md b/files/ja/web/css/_colon_nth-of-type/index.md new file mode 100644 index 0000000000..0344e32b77 --- /dev/null +++ b/files/ja/web/css/_colon_nth-of-type/index.md @@ -0,0 +1,110 @@ +--- +title: ':nth-of-type()' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 擬似クラス +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

:nth-of-type() は CSS の擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。

+ +
/* 兄弟の <p> 要素の中で、
+   3つおきに選択 */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

構文

+ +

nth-of-type 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。

+ +

構文の詳しい説明は {{Cssxref(":nth-child")}} を参照してください。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<div>
+  <div>This element isn't counted.</div>
+  <p>1st paragraph.</p>
+  <p>2nd paragraph.</p>
+  <div>This element isn't counted.</div>
+  <p>3rd paragraph.</p>
+  <p class="fancy">4th paragraph.</p>
+</div>
+ +

CSS

+ +
/* 奇数の段落 */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* 偶数の段落 */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* 最初の段落 */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
+p.fancy:nth-of-type(1) {
+  text-decoration: underline;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Basic_example', 250, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

+ + 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")}}

+
+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_only-of-type/index.html b/files/ja/web/css/_colon_only-of-type/index.html deleted file mode 100644 index 879750cecf..0000000000 --- a/files/ja/web/css/_colon_only-of-type/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: ':only-of-type' -slug: 'Web/CSS/:only-of-type' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:only-of-type' ---- -
{{CSSRef}}
- -

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

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

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

-
- -

構文

- -{{csssyntax}} - -

例

- -

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>
-
- -

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")}}

-
- -

関連項目

- - diff --git a/files/ja/web/css/_colon_only-of-type/index.md b/files/ja/web/css/_colon_only-of-type/index.md new file mode 100644 index 0000000000..879750cecf --- /dev/null +++ b/files/ja/web/css/_colon_only-of-type/index.md @@ -0,0 +1,95 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

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

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

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

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

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>
+
+ +

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")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/css/_colon_root/index.html b/files/ja/web/css/_colon_root/index.html deleted file mode 100644 index 902dac18db..0000000000 --- a/files/ja/web/css/_colon_root/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: ':root' -slug: 'Web/CSS/:root' -tags: - - CSS - - Layout - - Pseudo-class - - Reference - - Web - - セレクター - - 疑似クラス -translation_of: 'Web/CSS/:root' ---- -
{{CSSRef}}
- -

CSS の :root 疑似クラスは、文書を表すツリーのルート要素を選択します。 HTML では、 :root は {{HTMLElement("html")}} 要素を表し、詳細度が高いことを除けば html セレクターと同等です。

- -
/* 文書のルート要素（HTML の場合は <html>）を選択 */
-:root {
-  background: yellow;
-}
- -

構文

- -{{csssyntax}} - -

例

- -

:root はグローバルの CSS 変数を宣言するのに便利です。

- -
:root {
-  --main-color: hotpink;
-  --pane-padding: 5px 42px;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザー実装状況

- -

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

diff --git a/files/ja/web/css/_colon_root/index.md b/files/ja/web/css/_colon_root/index.md new file mode 100644 index 0000000000..902dac18db --- /dev/null +++ b/files/ja/web/css/_colon_root/index.md @@ -0,0 +1,63 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

CSS の :root 疑似クラスは、文書を表すツリーのルート要素を選択します。 HTML では、 :root は {{HTMLElement("html")}} 要素を表し、詳細度が高いことを除けば html セレクターと同等です。

+ +
/* 文書のルート要素（HTML の場合は <html>）を選択 */
+:root {
+  background: yellow;
+}
+ +

構文

+ +{{csssyntax}} + +

例

+ +

:root はグローバルの CSS 変数を宣言するのに便利です。

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ +

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

-- cgit v1.2.3-54-g00ecf