From 1f366e7351f85a7ec5f99a1bdae2effb83bf8675 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 23:16:05 +0900 Subject: 2021/08/27 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_nth-last-of-type/index.md | 117 +++++++++------------- 1 file changed, 49 insertions(+), 68 deletions(-) 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 index b1c64d7f60..5e0c2060e8 100644 --- a/files/ja/web/css/_colon_nth-last-of-type/index.md +++ b/files/ja/web/css/_colon_nth-last-of-type/index.md @@ -1,94 +1,75 @@ --- title: ':nth-last-of-type()' -slug: 'Web/CSS/:nth-last-of-type' +slug: Web/CSS/:nth-last-of-type tags: - CSS - - ウェブ - - セレクター - - リファレンス - レイアウト - - 疑似クラス -translation_of: 'Web/CSS/:nth-last-of-type' + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.nth-last-of-type +translation_of: Web/CSS/:nth-last-of-type --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:nth-last-of-type()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中で指定された型の要素を、最後から数えた位置に基づいて選択します。 -
/* 兄弟の <p> 要素の中で、
-   後ろから数えて3つおきに選択 */
+```
+/* 兄弟の 
 要素の中で、
+   後ろから数えて 3 つおきに選択 */
 p:nth-last-of-type(4n) {
   color: lime;
-}
+} +``` -
-

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

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

構文

+## 構文 -

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

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

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

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

形式文法

+### 形式文法 {{csssyntax}} -

例

+## 例 -

HTML

+### 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>
+```html +
+ This is a span. + This is another span. + This is emphasized. + Wow, this span gets limed!!! + This is struck through. + Here is one last span. +
+``` -

CSS

+### CSS -
span:nth-last-of-type(2) {
+```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")}}

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

関連情報

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