yano3nora
7/1/2017 - 4:58 AM

[css: Diff of nth-of-type / nth-child] Attention on old contents. #css

[css: Diff of nth-of-type / nth-child] Attention on old contents. #css

nthOfTypeAndNthChild.md
content_copyfile_download
  • Rendered
  • Source

nth-child(n)

nth-childは子要素が何であってもカウント。

<dl>
    <dt>サンプル</dt>
    <dd>テキスト1</dd>  <!-- ここは dd:nth-child(3) -->
    <dd>テキスト2</dd>
</dl>

nth-of-type(n)

nth-of-typeは指定したタグのみカウント。

<dl>
    <dt>サンプル</dt>
    <dd>テキスト1</dd>  <!-- ここは dd:nth-of-type(2) -->
    <dd>テキスト2</dd>
</dl>