title: CSS numbering using nth-child
body: <p>I've a <code>div</code> and inside the <code>div</code> there is multiple <code>p</code> tags. I need to number them using css. The count of <code>p</code> tag may vary.</p>
  
  <p>Using <code>:nth-child()</code> and <code>::before</code> I can do something like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div p:first-child::before {
    content: '1 '
  }
  div p:nth-child(2)::before {
    content: '2 '
  }
  div p:nth-child(3)::before {
    content: '3 '
  }
  div p:nth-child(4)::before {
    content: '4 '
  }
  div p:nth-child(5)::before {
    content: '5 '
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;p&gt;abc&lt;/p&gt;
    &lt;p&gt;abc&lt;/p&gt;
    &lt;p&gt;abc&lt;/p&gt;
    &lt;p&gt;abc&lt;/p&gt;
    &lt;p&gt;abc&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If there is large amount of elements how can I implement it. Is there any way to child number in css inside <code>:nth-child()</code>, something like this.</p>
  
  <pre><code>div p:nth-child(n)::before {
    content: n
  }
  </code></pre>
  
  <p>where  <code>n</code> is the child number. I know numbering can done using list, but I need to know is there any way to get child num inside the css selector.</p>