{
  "$type": "site.standard.document",
  "canonicalUrl": "https://blog.nove-b.dev//posts/understand-difference-between-nth-child-and-nth-of-type",
  "path": "/posts/understand-difference-between-nth-child-and-nth-of-type",
  "publishedAt": "2023-11-09T00:00:00.000Z",
  "site": "at://did:plc:2atly2y5kfyjcj5zap6pv4wd/site.standard.publication/3mmxeqr2tcb2k",
  "tags": [
    "css",
    "nth-child",
    "nth-of-type",
    "scss"
  ],
  "textContent": "nth-child\n\n親要素内のすべての子要素に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に関係なく、すべての子要素が考慮される。\n\nnth-of-type\n\n親要素内の特定の要素タイプ（タグ名）に対して適用され、その中から条件に一致する要素が選択される。 そのため要素の種類に基づいて選択がされる。\n\n具体例\n\n例えば以下のコードがあった時、\n\nnth-child\n\nこの場合、.example内の直下のdiv要素の中から、3番目の要素（\"Item 3\"）が赤くなる。\n\nnth-of-type\n\nこの場合、.example内の直下のdiv要素の中から、同じ種類の要素の中で3番目の要素（\"Item\n5\"）が青くなる。",
  "title": "nth-childとnth-of-typeの違いを理解する"
}