From 9f51fad0d4f15aab22460fc9fe2a92c81572e13f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 23:12:36 +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-of-type/index.md | 122 ++++++++++++--------------- 1 file changed, 53 insertions(+), 69 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/_colon_nth-of-type/index.md b/files/ja/web/css/_colon_nth-of-type/index.md index 0344e32b77..350651020e 100644 --- a/files/ja/web/css/_colon_nth-of-type/index.md +++ b/files/ja/web/css/_colon_nth-of-type/index.md @@ -1,54 +1,59 @@ --- title: ':nth-of-type()' -slug: 'Web/CSS/:nth-of-type' +slug: Web/CSS/:nth-of-type tags: - CSS - - Layout - - Pseudo-class - - Reference - - Web - - セレクター + - レイアウト - 擬似クラス -translation_of: 'Web/CSS/:nth-of-type' + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.nth-of-type +translation_of: Web/CSS/:nth-of-type --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

構文

+## 構文 -

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

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

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

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

形式文法

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

例

+## 例 -

基本的な例

+### 基本的な例 -

HTML

+#### HTML -
<div>
-  <div>This element isn't counted.</div>
-  <p>1st paragraph.</p>
-  <p>2nd paragraph.</p>
-  <div>This element isn't counted.</div>
-  <p>3rd paragraph.</p>
-  <p class="fancy">4th paragraph.</p>
-</div>
+```html +
+
This element isn't counted.
+

1st paragraph.

+

2nd paragraph.

+
This element isn't counted.
+

3rd paragraph.

+

4th paragraph.

+
+``` -

CSS

+#### CSS -
/* 奇数の段落 */
+```css
+/* 奇数の段落 */
 p:nth-of-type(2n+1) {
   color: red;
 }
@@ -63,48 +68,27 @@ p:nth-of-type(1) {
   font-weight: bold;
 }
 
-/* .fancy クラスは1番目ではなく4番目の p 要素にしかついていないので、これは効果がありません */
-p.fancy:nth-of-type(1) {
+/* これは 2n+1 であり、かつ fancy のクラスを持つ要素に一致するので、第 3 段落に一致します。
+2 番目の段落は fancy というクラスを持っていますが、 :nth-of-type(2n+1) ではないので一致しません。 */
+p.fancy:nth-of-type(2n+1) {
   text-decoration: underline;
 }
-
- -

結果

- -

{{EmbedLiveSample('Basic_example', 250, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}親を持たない要素も該当するよう追加。
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}初回定義。
- -

ブラウザーの互換性

+``` -
-

{{Compat("css.selectors.nth-of-type")}}

-
+#### 結果 + +{{EmbedLiveSample('Basic_example', 250, 250)}} + +> **Note:** このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連情報

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