0Pricing
CSS Academy · レッスン

:nth-childと:nth-of-type

nth式と型セレクターを使い、親要素内での位置に基づいて要素を選択します。

「:nth-childと:nth-of-type」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

構造擬似クラスとは

構造擬似クラスは、親要素内での位置に基づいて要素を選択します。特定の子要素を対象にするために、クラスや JavaScript を追加する必要がなくなります。

:first-child と :last-child

親要素の最初または最後の子要素を選択します：

<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>

:nth-child() の基本

:nth-child(n) は、すべての種類の兄弟要素の中での位置（1から数える）に基づいて要素を選択します。

<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>

キーワードを使った :nth-child()

交互に行のスタイルを設定するには、キーワード odd または even を使用します：

<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>

数式を使った :nth-child()

An+B の数式を使用します。A は間隔、B はオフセットです。n は 0 から始まり、増加します。

  • 3n — 3つごと（3、6、9…）
  • 3n+1 — 3つごとの最初（1、4、7…）
  • -n+3 — 最初の3項目のみ
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

:nth-of-type()

:nth-of-type() は、同じ要素の種類の兄弟要素だけを数え、他の要素は無視します。要素の種類が混在している場合に重要です。

<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>

:first-of-type と :last-of-type

兄弟要素の中から、特定のタグの種類における最初または最後の要素を選択します：

<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />

:nth-child と :nth-of-type の違い

主な違い：

  • p:nth-child(2) — 2番目の子要素が <p> の場合に選択します
  • p:nth-of-type(2) — 他の要素に関係なく、2番目の <p> を選択します

:only-child と :only-of-type

:only-child は、親要素の唯一の子要素である要素を選択します。:only-of-type は、親要素内でその種類が1つしかない要素を選択します。

<div><p>I'm the only child in this div.</p></div>

of S セレクターを使った :nth-child()（モダン）

モダン CSS では、:nth-child(An+B of selector) を使って、nth の数式で数える要素を絞り込めます：

<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>

実践：最後の行のグリッド間隔

最後に表示される要素の下マージンを削除します：

<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>

確認問題

最初の項目から始めて、3つごとのリスト項目を対象にするセレクターはどれですか？

まとめ

:nth-child() は位置に基づいてすべての兄弟要素を数え、:nth-of-type() は同じタグの兄弟要素だけを数えます。縞模様のテーブルには odd/even を使用します。An+B の数式を使えば、クラスを追加せずに「3つごと」や「最初の5つ」といった強力なパターンを実現できます。

よくある質問

「:nth-childと:nth-of-type」レッスンは無料ですか？

はい。「:nth-childと:nth-of-type」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「:nth-childと:nth-of-type」で何を学びますか？

nth式と型セレクターを使い、親要素内での位置に基づいて要素を選択します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「:nth-childと:nth-of-type」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. :hover :focus :activeと:visited
  2. :nth-childと:nth-of-type
  3. :not()、:is()、:where()
  4. :checked、:disabledとフォーム状態の疑似クラス
← CSS Academyに戻る