From 31c11354c1b423f8392046d881150c68e6bbb452 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 23:01:13 +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_last-child/index.md | 161 +++++++++++++--------------- 1 file changed, 73 insertions(+), 88 deletions(-) diff --git a/files/ja/web/css/_colon_last-child/index.md b/files/ja/web/css/_colon_last-child/index.md index 56e5ddd649..d81795db39 100644 --- a/files/ja/web/css/_colon_last-child/index.md +++ b/files/ja/web/css/_colon_last-child/index.md @@ -1,127 +1,112 @@ --- title: ':last-child' -slug: 'Web/CSS/:last-child' +slug: Web/CSS/:last-child tags: - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:last-child' + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.last-child +translation_of: Web/CSS/:last-child --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:last-child`** は[CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中で最後の要素を表します。 -
/* 兄弟要素の中で最後の <p> を
+```
+/* 兄弟要素の中で最後の 
 を
    すべてを選択 */
 p:last-child {
   color: lime;
-}
+} +``` -
-

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

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

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

基本的な例

+### 基本的な例 -

HTML

+#### HTML -
<div>
-  <p>This text isn't selected.</p>
-  <p>This text is selected!</p>
-</div>
+```html
+

+  
このテキストは選択されません。

+  
このテキストは選択されます！

+

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

このテキストは選択されません。

+

このテキストは選択されません。 `p` ではありません。

+
+``` -

CSS

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

結果

+#### 結果 -

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

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

リストのスタイル付け

+### リストのスタイル付け -

HTML

+#### 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>
+```html + +``` -

CSS

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

- -

関連情報

+} +``` - +#### 結果 + +{{EmbedLiveSample('Styling_a_list')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":last-of-type")}} +- {{CSSxRef(":first-child")}} +- {{CSSxRef(":nth-child")}} -- cgit v1.2.3-54-g00ecf