From 67bd8899c0fbd3b8af064be7b19e5ebe68c6a638 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 22:51:41 +0900 Subject: 2021/10/12 時点の英語場に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_nth-last-child/index.md | 265 +++++++++++------------- 1 file changed, 121 insertions(+), 144 deletions(-) diff --git a/files/ja/web/css/_colon_nth-last-child/index.md b/files/ja/web/css/_colon_nth-last-child/index.md index 224e5d19dc..2337800b90 100644 --- a/files/ja/web/css/_colon_nth-last-child/index.md +++ b/files/ja/web/css/_colon_nth-last-child/index.md @@ -1,193 +1,170 @@ --- title: ':nth-last-child()' -slug: 'Web/CSS/:nth-last-child' +slug: Web/CSS/:nth-last-child tags: - CSS - - ウェブ - - セレクター - - リファレンス - レイアウト - - 疑似クラス -translation_of: 'Web/CSS/:nth-last-child' + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.nth-last-child +translation_of: Web/CSS/:nth-last-child --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

構文

+## 構文 -

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

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

キーワード値

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

関数表記

+### 関数記法 -
-
<An+B>
-
一連の兄弟要素の中で、 n に正の整数か0が入るとき、 An+B のパターンに一致する位置の要素を表します。後ろから数えた最初の要素の番号は 1 です。 A と B の値は両方とも {{cssxref("<integer>")}} です。
-
+- `` + - : 一連の兄弟要素の中で、 `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 {
+## 例
+
+### セレクターの例
+
+- `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` セレクターと同じです。 (`n` はゼロから始まるので、最後の要素が1で始まり、 `n` および `n+1` が共に同じ要素を選択します。)
+- `p:nth-last-child(1)` または `p:nth-last-child(0n+1)`
+  - : 兄弟要素のグループの中で最初の `
` 要素すべてを表します。これは {{cssxref(":last-child")}} セレクターと同じです。
+
+### 詳細な例
+
+#### HTML
+
+```html
+
+  
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+  
+
First line
Second line
Third line
Fourth line
Fifth line

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

結果

+#### 結果 -

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

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

数量クエリ

+### 数量クエリー -

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

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

HTML

+#### HTML -
<h4>4項目のリスト (スタイル付き):</h4>
-<ol>
-  <li>One</li>
-  <li>Two</li>
-  <li>Three</li>
-  <li>Four</li>
-</ol>
+```html
+
4 項目のリスト (スタイル付き):

+
    
+  
  1. One
    2. 
+  
  2. Two
    3. 
+  
  3. Three
    4. 
+  
  4. Four
    5. 
+

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

2 項目のリスト (スタイルなし):

+
    +
  1. One
    2. +
  2. Two
    3. +
+``` -

CSS

+#### CSS -
/* 3つ以上のリスト項目がある場合、
+```css
+/* 3 つ以上のリスト項目がある場合、
    すべてにスタイル付けする */
 li:nth-last-child(n+3),
-li:nth-last-child(n+3) ~ li {
+li:nth-last-child(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')}}初回定義
+} +``` + +#### 結果 + +{{EmbedLiveSample('Quantity_query', '100%', 270)}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -
-

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

-
+{{Compat}} -

関連情報

+## 関連情報 - +- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}} +- [CSS の数量クエリー](https://alistapart.com/article/quantity-queries-for-css) -- cgit v1.2.3-54-g00ecf