2021/12/17 時点の英語版に同期

1 files changed, 53 insertions, 69 deletions

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
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>:nth-of-type()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。</p>
+**`:nth-of-type()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中で指定された型 (タグ名) の要素を、位置に基づいて選択します。
 
-<pre class="brush: css no-line-numbers  language-css notranslate">/* 兄弟の &lt;p&gt; 要素の中で、
-   3つおきに選択 */
+```css
+/* 兄弟の <p> 要素の中で、
+   3 つおきに選択 */
 p:nth-of-type(4n) {
   color: lime;
-}</pre>
+}
+```
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p><code>nth-of-type</code> 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を1つ取ります。</p>
+`nth-of-type` 擬似クラスは、要素を選択する最後から数えるパターンを表す引数を 1 つ取ります。
 
-<p>構文の詳しい説明は {{Cssxref(":nth-child")}} を参照してください。</p>
+構文の詳しい説明は {{Cssxref(":nth-child")}} を参照してください。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+### 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+### 基本的な例
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div&gt;
-  &lt;div&gt;This element isn't counted.&lt;/div&gt;
-  &lt;p&gt;1st paragraph.&lt;/p&gt;
-  &lt;p&gt;2nd paragraph.&lt;/p&gt;
-  &lt;div&gt;This element isn't counted.&lt;/div&gt;
-  &lt;p&gt;3rd paragraph.&lt;/p&gt;
-  &lt;p class="fancy"&gt;4th paragraph.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <div>This element isn't counted.</div>
+  <p>1st paragraph.</p>
+  <p class="fancy">2nd paragraph.</p>
+  <div>This element isn't counted.</div>
+  <p class="fancy">3rd paragraph.</p>
+  <p>4th paragraph.</p>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">/* 奇数の段落 */
+```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;
 }
-</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Basic_example', 250, 200)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>親を持たない要素も該当するよう追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
-   <td>{{Spec2('CSS3 Selectors')}}</td>
-   <td>初回定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+```
 
-<div>
-<p>{{Compat("css.selectors.nth-of-type")}}</p>
-</div>
+#### 結果
+
+{{EmbedLiveSample('Basic_example', 250, 250)}}
+
+> **Note:** このセレクターを使用して n 番目のクラスを選択する方法はありません。このセレクターは、一致するリストを作成する際に型だけを見ます。しかし、上の例のように `:nth-of-type` の位置**と**クラスに基づいて要素に CSS を適用することができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}</li>
-</ul>
+- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}