From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_nth-last-child/index.html | 196 ++++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 files/ja/web/css/_colon_nth-last-child/index.html (limited to 'files/ja/web/css/_colon_nth-last-child/index.html') diff --git a/files/ja/web/css/_colon_nth-last-child/index.html b/files/ja/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..997902b16f --- /dev/null +++ b/files/ja/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,196 @@ +--- +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")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf