From 64921fbf956f49e5fa94c4126076094bb86d770a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 22:42:47 +0900 Subject: 2021/12/17 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_nth-child/index.md | 286 +++++++++++++---------------- 1 file changed, 129 insertions(+), 157 deletions(-) (limited to 'files/ja/web/css/_colon_nth-child') diff --git a/files/ja/web/css/_colon_nth-child/index.md b/files/ja/web/css/_colon_nth-child/index.md index bb7351fa96..13c5d34ddc 100644 --- a/files/ja/web/css/_colon_nth-child/index.md +++ b/files/ja/web/css/_colon_nth-child/index.md @@ -1,148 +1,143 @@ --- title: ':nth-child()' -slug: 'Web/CSS/:nth-child' +slug: Web/CSS/:nth-child tags: - CSS - - Reference - - Selectors - - Web - - セレクター + - レイアウト - 擬似クラス -translation_of: 'Web/CSS/:nth-child' + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.nth-child +translation_of: Web/CSS/:nth-child --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:nth-child()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中での位置に基づいて選択します。 -
/* リスト中の2番目の <li> 要素を選択 */
+```css
+/* リスト中の 2 番目の 
  •  要素を選択 */
 li:nth-child(2) {
-  color: lime;
+  color: lime;
 }
 
-/* 兄弟要素の中で3つおきに
-   要素を選択 */
+/* 兄弟要素の中で 3 つおきに要素を選択 */
 :nth-child(4n) {
   color: lime;
 }
-
    • +``` + +## 構文 + +`:nth-child()` 擬似クラスは、引数を 1 つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は 1 から始まります。 + +### キーワード値 -

    構文

    +- `odd` + - : 一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。 +- `even` + - : 一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。 -

    nth-child 擬似クラスは、引数を1つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は1から始まります。

    +### 関数記法 -

    キーワード値

    +- `` -
    -
    odd
    -
    一連の兄弟要素の中で奇数番目の要素 (1, 3, 5, など) を表します。
    -
    even
    -
    一連の兄弟要素の中で偶数番目の要素 (2, 4, 6, など) を表します。
    -
    + - : リスト中の位置が、 `An+B` で定義された数値のパターンと一致する要素を表します。 -

    関数表記

    + - `A` は整数の刻み値です。 + - `B` は整数の加算値です。 + - `n` はすべての正の整数で、 0 から始まります。 -
    -
    <An+B>
    -
    リスト中の位置が、 An+B で定義された数値のパターンと一致する要素を表します。
    - A は整数の刻み値です。
    - B は整数の加算値です。
    - n はすべての正の整数で、0から始まります。
    -
    リスト中の An+B 番目の要素として読むことができます。
    -
    + リスト中の *An+B* 番目の要素として読むことができます。 -

    形式文法

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

    例

    +## 例

    セレクターの例

    -
    -
    tr:nth-child(odd) 又は tr:nth-child(2n+1)
    -
    HTML テーブルの奇数行 (1, 3, 5, など) を表します。
    -
    tr:nth-child(even) または tr:nth-child(2n)
    -
    HTML テーブルの偶数行 (2, 4, 6, など) を表します。
    -
    :nth-child(7)
    -
    7番目の要素を表します。
    -
    :nth-child(5n)
    -
    5番目 [=5×1], 10番目 [=5×2], 15番目 [=5×3], 等の要素を表します。最初のものは 0番目 [=5x0] が式の結果として返りますが、 n が0から始まるのに対して添字は1から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように B の部分が >0 となる場合にもっとよく分かるでしょう。
    -
    :nth-child(n+7)
    -
    7番目とそれ以降のすべての要素を表します。 7番目 [=0+7], 8番目 [=1+7], 9番目 [=2+7], 等です。
    -
    :nth-child(3n+4)
    -
    4番目 [=(3×0)+4], 7番目 [=(3×1)+4], 10番目 [=(3×2)+4], 13番目 [=(3×3)+4], 等の要素を表します。
    -
    :nth-child(-n+3)
    -
    兄弟要素のグループの中で最初の3つの要素を表します。 [=-0+3, -1+3, -2+3]
    -
    p:nth-child(n)
    -
    兄弟要素のグループの中ですべての <p> 要素を表します。これは単純な p セレクターと同じ要素を選択します (但し、具体度はより高くなります)。
    -
    p:nth-child(1) または p:nth-child(0n+1)
    -
    兄弟要素のグループの中で最初の <p> 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (具体度も同じです)。
    -
    - -
    -
    p:nth-child(n+8):nth-child(-n+15)
    -
    兄弟要素のグループの中で8～15番目の <p> 要素を表します。
    -
    - -

    詳細な例

    - -

    HTML

    - -
    <h3><code>span:nth-child(2n+1)</code>, WITHOUT an
-   <code>&lt;em&gt;</code> among the child elements.</h3>
-<p>Children 1, 3, 5, and 7 are selected.</p>
-<div class="first">
-  <span>Span 1!</span>
-  <span>Span 2</span>
-  <span>Span 3!</span>
-  <span>Span 4</span>
-  <span>Span 5!</span>
-  <span>Span 6</span>
-  <span>Span 7!</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-child(2n+1)</code>, WITH an
-   <code>&lt;em&gt;</code> among the child elements.</h3>
-<p>Children 1, 5, and 7 are selected.<br>
-   3 is used in the counting because it is a child, but it isn't
-   selected because it isn't a <code>&lt;span&gt;</code>.</p>
-<div class="second">
-  <span>Span!</span>
-  <span>Span</span>
-  <em>This is an `em`.</em>
-  <span>Span</span>
-  <span>Span!</span>
-  <span>Span</span>
-  <span>Span!</span>
-  <span>Span</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-of-type(2n+1)</code>, WITH an
-   <code>&lt;em&gt;</code> among the child elements.</h3>
-<p>Children 1, 4, 6, and 8 are selected.<br>
-   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
-   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
-   children of that type. The <code>&lt;em&gt;</code> is completely skipped
-   over and ignored.</p>
-<div class="third">
-  <span>Span!</span>
-  <span>Span</span>
-  <em>This is an `em`.</em>
-  <span>Span!</span>
-  <span>Span</span>
-  <span>Span!</span>
-  <span>Span</span>
-  <span>Span!</span>
-</div>
-
    - -

    CSS

    - -
    html {
+- `tr:nth-child(odd)` または `tr:nth-child(2n+1)`
+  - : HTML テーブルの奇数行 (1、3、5、など) を表します。
+- `tr:nth-child(even)` または `tr:nth-child(2n)`
+  - : HTML テーブルの偶数行 (2、4、6、など) を表します。
+- `:nth-child(7)`
+  - : 7 番目の要素を表します。
+- `:nth-child(5n)`
+  - : **5** 番目 \[=5×1]、**10** 番目 \[=5×2]、**15** 番目 \[=5×3]、**等**の要素を表します。最初のものは **0** 番目 \[=5x0] が式の結果として返りますが、 `n` が 0 から始まるのに対して添字は 1 から始まるので、一致するものはないという結果になります。これは最初は奇妙に見えるかもしれませんが、次の例のように `B` の部分が `>0` となる場合にもっとよく分かるでしょう。
+- `:nth-child(n+7)`
+  - : 7 番目とそれ以降のすべての要素を表します。 **7** 番目 \[=0+7]、**8** 番目 \[=1+7]、**9** 番目 \[=2+7]、**等**です。
+- `:nth-child(3n+4)`
+  - : **4** 番目 \[=(3×0)+4]、**7** 番目 \[=(3×1)+4]、**10** 番目 \[=(3×2)+4]、**13** 番目 \[=(3×3)+4]、**等**の要素を表します。
+- `:nth-child(-n+3)`
+  - : 兄弟要素のグループの中で最初の 3 つの要素を表します。 \[=-0+3, -1+3, -2+3]
+- `p:nth-child(n)`
+  - : 兄弟要素のグループの中ですべての `
    ` 要素を表します。これは単純な `p` セレクターと同じ要素を選択します (但し、詳細度はより高くなります)。
+- `p:nth-child(1)` または `p:nth-child(0n+1)`
+  - : 兄弟要素のグループの中で最初の `
    ` 要素すべてを表します。これは {{cssxref(":first-child")}} セレクターと同じです (詳細度も同じです)。
+
+- `p:nth-child(n+8):nth-child(-n+15)`
+  - : 兄弟要素のグループの中で 8 ～ 15 番目の `
    ` 要素を表します。
+
+### 詳細な例
+
+```html
+
    span:nth-child(2n+1) で、子要素の間に
+   <em> がない場合
    
+
    子要素 1, 3, 5, 7 が選択されます。
    
+
    
+  Span 1!
+  Span 2
+  Span 3!
+  Span 4
+  Span 5!
+  Span 6
+  Span 7!
+
    
+
+
    
+
+
    span:nth-child(2n+1) で、子要素の間に
+   <em> がある場合
    
+
    子要素 1, 5, 7 が選択されます。
    
+   3 は子要素などでカウントに入りますが、
+   <span> ではないので選択されません。
    
+
    
+  Span!
+  Span
+  これは `em`
+  Span
+  Span!
+  Span
+  Span!
+  Span
+
    
+
+
    
+
+
    span:nth-of-type(2n+1) で、子要素の間に
+   <em> がある場合
    
+
    子要素 1, 4, 6, 8 が選択されます。
    
+   3 は <em> であり、
+   <span> ではないのでカウントに入りません。 nth-of-type
+   はこの型の子のみを選択します。 <em> は完全に飛ばされ、無視されます。
    
+
    
+  Span!
+  Span
+  これは `em`
+  Span!
+  Span
+  Span!
+  Span
+  Span!
+
    
+```
+
+#### CSS
+
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -158,44 +153,21 @@ div em {
 .second span:nth-child(2n+1),
 .third span:nth-of-type(2n+1) {
   background-color: lime;
-}
    - -

    結果

    - -

    {{EmbedLiveSample('Detailed_example', 550, 550)}}

    - -

    仕様書

    - - - - - - - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}<selector> の構文と仕様書に、親を持たない要素も一致するよう追加。
    {{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}初回定義。
    - -

    ブラウザーの互換性

    - -
    -

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

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

    関連情報

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