keyan.r keyan.r - 5 months ago 19
CSS Question

nth-child not responding on HTML using Handlebars

In the code below, I am trying to use nth-child to have the 4th, 7th, 10th, etc. category be on a new line. I am unsure why the CSS code is not responding.



#categories:nth-child(3n + 1) {clear: left;}

{{#if categories}}
<div id="categories">
{{#each categories}}
<div class="category" id="category-unit" url="{{url}}">
<div class="category-icon"></div>
<div class="category-name">{{name}}</div>
<span class="category-info"></span>
</div>
{{/each}}
</div>
{{/if}}




Answer

First, you need to select the children of your #categories, not the div itself. Also, :nth-child(3n + 1) will also select the 1st element. If you want to select the 4th, 7th, 10th ect. without the first, do this:

CSS

#categories > div:nth-child(n+4):nth-child(3n + 1) {
  background: #FF0000;
}
<div id="categories">
  <div>The first paragraph.</div>
  <div>The second paragraph.</div>
  <div>The third paragraph.</div>
  <div>The fourth paragraph.</div>
  <div>The fifth paragraph.</div>
  <div>The sixth paragraph.</div>
  <div>The seventh paragraph.</div>
  <div>The eight paragraph.</div>
  <div>The ninth paragraph.</div>
  <div>The tenth paragraph.</div>
  <div>The eleventh paragraph.</div>
</div>