1. <body id="sample5">
  2. <div>
  3. <h1><code>:first-child</code>と<code>:first-of-type</code>の違い</h1>
  4. <p>これは<code>:first-child</code>と<code>:first-of-type</code>の違いを見るためのサンプルです。<br>
  5. <span>※各テキストの要素名が分かるように<code>::before</code>疑似要素と<code>::after</code>疑似要素を使って、タグを表示してます。</span></p>
  6. <section>
  7. <h2>違いを見るためのサンプルスタイル</h2>
  8. <p><code>:first-child</code>と<code>:first-of-type</code>を使って、以下の5つのスタイルを用意しました。</p>
  9. <ul>
  10. <li>「#test p:first-child<span>(最初の要素の<code><p></code>)</span>」に、赤い枠線をつける</li>
  11. <li>「#test p:first-of-type<span>(最初の<code><p></code>)</span>」に、グレーの背景色をつける</li>
  12. <li>「#test p:nth-child(5)<span>(5つめの要素の<code><p></code>)</span>」に、青い枠線をつける</li>
  13. <li>「#test p:nth-of-type(5)<span>(5つめの<code><p></code>)</span>」に、濃いめのグレーの背景色をつける</li>
  14. <li>「#test li:nth-of-type(3n)<span>(<code><li></code>を3つ置き)</span>」に、赤文字にする</li>
  15. </ul>
  16. <section id="test">
  17. <h3>このセクション内で、上記のスタイルが適用される事になります。</h3>
  18. <p>このテキストはひとつめの<code><p></code>なので、<code>:first-of-type</code>で指定した、グレーの背景色がつきます。</p>
  19. <p><code>:first-child</code>は、同セクション内の要素すべてを対象とするため、上記テキストは<code><h3></code>も含め<em>2つめの要素</em>と解釈されます。「<em>ひとつめの要素</em>の<code><p></code>」は存在しないということになります。</p>
  20. <ul>
  21. <li>これは<code><ul></code>リストのひとつめのテキスト。</li>
  22. <li>これは<code><ul></code>リストのふたつめのテキスト。</li>
  23. <li>これは<code><ul></code>リストのみっつめのテキスト。</li>
  24. </ul>
  25. <p>このテキストは3つめの<code><p></code>ですが、<br>
  26. <code>:nth-child(5)</code>は、<code>:first-child</code>と同じ理由でこのテキストを<em>5つめの要素</em>と解釈するため、青い枠線がつきます。</p>
  27. <p>このテキストは4つめの<code><p></code>です。</p>
  28. <p>このテキストは5つめの<code><p></code>なので、濃いめのグレーの背景色がつきます。</p>
  29. <section>
  30. <p>ここは<em>別セクション</em>となるので、このテキストはひとつめの<code><p></code>という事になります。<br>
  31. <em>ひとつめの要素</em>の<code><p></code>でもあるので、赤い枠線とグレーの背景色が両方ともつきます。</p>
  32. <h4><code><section id="test"></code>の中の別セクションタイトル</h4>
  33. <ol>
  34. <li>これは<code><ol></code>リストのひとつめのテキスト。</li>
  35. <li>これは<code><ol></code>リストのふたつめのテキスト。</li>
  36. <li>これは<code><ol></code>リストのみっつめのテキスト。</li>
  37. <li>これは<code><ol></code>リストのよっつめのテキスト。</li>
  38. <li>これは<code><ol></code>リストのいつつめのテキスト。</li>
  39. <li>これは<code><ol></code>リストのむっつめのテキスト。</li>
  40. <li>これは<code><ol></code>リストのななつめのテキスト。</li>
  41. <li>これは<code><ol></code>リストのやっつめのテキスト。</li>
  42. </ol>
  43. <p>このテキストは2つめの<code><p></code>です。</p>
  44. <p>このテキストは3つめの<code><p></code>ですが、「<em>5つめの要素</em>の<code><p></code>」ということで、青い枠線がつきます。</p>
  45. </section>
  46. <p>このテキストは6つめの<code><p></code>です。</p>
  47. </section>
  48. </section>
  49. </div>
  50. </body>
  1. /* :::::: sample5 :::::: */
  2. #sample5 {
  3. padding: 10px;
  4. }
  5. #sample5 h2,
  6. #sample5 h3,
  7. #sample5 h4,
  8. #sample5 p {
  9. margin: 0 0 10px;
  10. }
  11. #sample5 p span,
  12. #sample5 li span {
  13. font-size: 0.8em;
  14. }
  15. #sample5 li p {
  16. margin: 0;
  17. }
  18. #sample5 code,
  19. #sample5 em,
  20. #sample5 strong {
  21. margin: 0 2px;
  22. }
  23. #sample5 article,
  24. #sample5 section {
  25. padding: 10px;
  26. border: 1px #ccc solid;
  27. }
  28. #sample5 section {
  29. margin-bottom: 10px;
  30. }
  31. /* child */
  32. #sample5 #test p:first-child {
  33. border: 2px red solid;
  34. }
  35. #sample5 #test p:nth-child(5) {
  36. border: 2px blue solid;
  37. }
  38. /* of-type */
  39. #sample5 #test p:first-of-type {
  40. background: #eee url(../img/bg_amiten.gif);
  41. }
  42. #sample5 #test p:nth-of-type(5) {
  43. background: #ccc url(../img/bg_amiten.gif);
  44. }
  45. #sample5 #test li:nth-of-type(3n) {
  46. color: red;
  47. }
  48. #sample5 section::before,
  49. #sample5 h1::after,
  50. #sample5 h2::after,
  51. #sample5 h3::after,
  52. #sample5 h4::after,
  53. #sample5 p::after,
  54. #sample5 li::after,
  55. #sample5 ul::before,
  56. #sample5 ol::before {
  57. padding: 0 3px;
  58. background: white;
  59. color: #999;
  60. font: 10px/1 "lucida grande",Arial,sans-serif;
  61. font-size: 10px;
  62. font-weight: normal;
  63. vertical-align: text-top;
  64. }
  65. #sample5 section::before { content: "<section>"; }
  66. #sample5 section#test::before { content: "<section id="test">"; }
  67. #sample5 h1::after { content: "<h1>"; }
  68. #sample5 h2::after { content: "<h2>"; }
  69. #sample5 h3::after { content: "<h3>"; }
  70. #sample5 h4::after { content: "<h4>"; }
  71. #sample5 p::after { content: "<p>"; }
  72. #sample5 li::after { content: "<li>"; }
  73. #sample5 ol::before { content: "<ol>"; }
  74. #sample5 ul::before { content: "<ul>"; }

:first-child:first-of-typeの違い

これは:first-child:first-of-typeの違いを見るためのサンプルです。
※各テキストの要素名が分かるように::before疑似要素と::after疑似要素を使って、タグを表示してます。

違いを見るためのサンプルスタイル

:first-child:first-of-typeを使って、以下の5つのスタイルを用意しました。

  • 「#test p:first-child(最初の要素の<p>」に、赤い枠線をつける
  • 「#test p:first-of-type(最初の<p>」に、グレーの背景色をつける
  • 「#test p:nth-child(5)(5つめの要素の<p>」に、青い枠線をつける
  • 「#test p:nth-of-type(5)(5つめの<p>」に、濃いめのグレーの背景色をつける
  • 「#test li:nth-of-type(3n)<li>を3つ置き)」に、赤文字にする

このセクション内で、上記のスタイルが適用される事になります。

このテキストはひとつめの<p>なので、:first-of-typeで指定した、グレーの背景色がつきます。

:first-childは、同セクション内の要素すべてを対象とするため、上記テキストは<h3>も含め2つめの要素と解釈されます。「ひとつめの要素<p>」は存在しないということになります。

  • これは<ul>リストのひとつめのテキスト。
  • これは<ul>リストのふたつめのテキスト。
  • これは<ul>リストのみっつめのテキスト。

このテキストは3つめの<p>ですが、
:nth-child(5)は、:first-childと同じ理由でこのテキストを5つめの要素と解釈するため、青い枠線がつきます。

このテキストは4つめの<p>です。

このテキストは5つめの<p>なので、濃いめのグレーの背景色がつきます。

ここは別セクションとなるので、このテキストはひとつめの<p>という事になります。
ひとつめの要素<p>でもあるので、赤い枠線とグレーの背景色が両方ともつきます。

<section id="test">の中の別セクションタイトル

  1. これは<ol>リストのひとつめのテキスト。
  2. これは<ol>リストのふたつめのテキスト。
  3. これは<ol>リストのみっつめのテキスト。
  4. これは<ol>リストのよっつめのテキスト。
  5. これは<ol>リストのいつつめのテキスト。
  6. これは<ol>リストのむっつめのテキスト。
  7. これは<ol>リストのななつめのテキスト。
  8. これは<ol>リストのやっつめのテキスト。

このテキストは2つめの<p>です。

このテキストは3つめの<p>ですが、「5つめの要素<p>」ということで、青い枠線がつきます。

このテキストは6つめの<p>です。