diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-04 23:01:13 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-01-14 23:09:59 +0900 |
commit | 31c11354c1b423f8392046d881150c68e6bbb452 (patch) | |
tree | fddcad49f23f27f3e12ea67736addb82fac66a79 /files | |
parent | 91b5de64dcc2bb6909ba12ae1f241142bda9d20f (diff) | |
download | translated-content-31c11354c1b423f8392046d881150c68e6bbb452.tar.gz translated-content-31c11354c1b423f8392046d881150c68e6bbb452.tar.bz2 translated-content-31c11354c1b423f8392046d881150c68e6bbb452.zip |
2021/08/13 時点の英語場に同期
Diffstat (limited to 'files')
-rw-r--r-- | files/ja/web/css/_colon_last-child/index.md | 161 |
1 files 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>:last-child</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、兄弟要素のグループの中で最後の要素を表します。</p> +**`:last-child`** は[CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中で最後の要素を表します。 -<pre class="brush: css no-line-numbers notranslate">/* 兄弟要素の中で最後の <p> を +``` +/* 兄弟要素の中で最後の <p> を すべてを選択 */ p:last-child { color: lime; -}</pre> +} +``` -<div class="note"> -<p><strong>注:</strong> 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。</p> -</div> +> **Note:** 当初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="Basic_example" name="Basic_example">基本的な例</h3> +### 基本的な例 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p>This text isn't selected.</p> - <p>This text is selected!</p> -</div> +```html +<div> + <p>このテキストは選択されません。</p> + <p>このテキストは選択されます!</p> +</div> -<div> - <p>This text isn't selected.</p> - <h2>This text isn't selected: it's not a `p`.</h2> -</div> -</pre> +<div> + <p>このテキストは選択されません。</p> + <h2>このテキストは選択されません。 `p` ではありません。</h2> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">p:last-child { +```css +p:last-child { color: lime; background-color: black; padding: 5px; } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p><span>{{EmbedLiveSample('Basic_example', 500, 200)}}</span></p> +{{EmbedLiveSample('Basic_example', 500, 200)}} -<h3 id="Styling_a_list" name="Styling_a_list">リストのスタイル付け</h3> +### リストのスタイル付け -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><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></pre> +```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> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">ul li { +```css +ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; -}</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample('Styling_a_list')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Selectors', '#the-last-child-pseudo', ':last-child')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>選択する要素に親を必要としないようにした。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#last-child-pseudo', ':last-child')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.selectors.last-child")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> +} +``` -<ul> - <li>{{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}}</li> - <li>{{CSSxRef(":last-of-type")}}</li> - <li>{{CSSxRef(":first-child")}}</li> - <li>{{CSSxRef(":nth-child")}}</li> -</ul> +#### 結果 + +{{EmbedLiveSample('Styling_a_list')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":last-of-type")}} +- {{CSSxRef(":first-child")}} +- {{CSSxRef(":nth-child")}} |