title: How does a rect affect css nth-child?
body: <p>I created an SVG using D3.  I am now trying to style it differently using the <code>nth-child</code> css selector.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.strat {
      width: 300px;
      margin: 0 auto;
  }
  
  .strat .bar-circles:nth-child(1n+0) circle {
      fill: #00688d;
  }
  
  .strat .bar-circles:nth-child(2n+0) circle {
      fill: #00a4a5;
  }
  
  .strat .bar-circles:nth-child(3n+0) circle {
      fill: #f7b454;
  }
  
  .strat .css-fix {
      stroke: #f0f;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h5&gt;Broken Nth Child&lt;/h5&gt;
  &lt;div class="strat"&gt;&lt;svg height="380" width="800" fill="#fff"&gt;&lt;rect x="0" y="0" height="400" width="800" stroke="#fff" fill="#fff" class="chart-background"&gt;&lt;/rect&gt;&lt;text x="140" y="100" font-size="10px" fill="#999" text-anchor="end"&gt;0&lt;/text&gt;&lt;text x="660" y="100" font-size="10px" fill="#999" text-anchor="start"&gt;89%&lt;/text&gt;&lt;circle r="2" cx="150" cy="97" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;line x1="150" x2="650" y1="97" y2="97" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"&gt;&lt;/line&gt;&lt;circle r="2" cx="650" cy="97" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;g class="bar-circles"&gt;&lt;circle r="30" cx="240.34792368125704" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="273.4567901234568" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="253.8159371492705" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="256.06060606060606" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="266.16161616161617" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="257.74410774410774" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="264.4781144781145" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;/g&gt;&lt;rect x="259.73936899862827" y="65" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate&lt;br /&gt;20%"&gt;&lt;/rect&gt;&lt;text x="140" y="220" font-size="10px" fill="#999" text-anchor="end"&gt;0&lt;/text&gt;&lt;text x="660" y="220" font-size="10px" fill="#999" text-anchor="start"&gt;89%&lt;/text&gt;&lt;circle r="2" cx="150" cy="217" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;line x1="150" x2="650" y1="217" y2="217" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"&gt;&lt;/line&gt;&lt;circle r="2" cx="650" cy="217" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;g class="bar-circles"&gt;&lt;/g&gt;&lt;text x="140" y="340" font-size="10px" fill="#999" text-anchor="end"&gt;0&lt;/text&gt;&lt;text x="660" y="340" font-size="10px" fill="#999" text-anchor="start"&gt;89%&lt;/text&gt;&lt;circle r="2" cx="150" cy="337" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;line x1="150" x2="650" y1="337" y2="337" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"&gt;&lt;/line&gt;&lt;circle r="2" cx="650" cy="337" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;g class="bar-circles"&gt;&lt;circle r="30" cx="210.60606060606062" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="229.12457912457913" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="228.00224466891135" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="232.4915824915825" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="229.68574635241305" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="219.02356902356902" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="225.75757575757575" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="230.2469135802469" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="210.04489337822673" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;/g&gt;&lt;rect x="223.8189980614223" y="305" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate&lt;br /&gt;13%" data-original-title="" title="" data-has-tip="true"&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/div&gt;
  
  
  &lt;h5&gt;Working Nth Child&lt;/h5&gt;
  &lt;div class="strat"&gt;&lt;svg height="380" width="800" fill="#fff"&gt;&lt;rect x="0" y="0" height="400" width="800" stroke="#fff" fill="#fff" class="chart-background"&gt;&lt;/rect&gt;&lt;text x="140" y="100" font-size="10px" fill="#999" text-anchor="end"&gt;0&lt;/text&gt;&lt;text x="660" y="100" font-size="10px" fill="#999" text-anchor="start"&gt;89%&lt;/text&gt;&lt;circle r="2" cx="150" cy="97" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;line x1="150" x2="650" y1="97" y2="97" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"&gt;&lt;/line&gt;&lt;circle r="2" cx="650" cy="97" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;g class="bar-circles"&gt;&lt;circle r="30" cx="240.34792368125704" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="273.4567901234568" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="253.8159371492705" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="262.7946127946128" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="256.06060606060606" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="266.16161616161617" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="257.74410774410774" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;circle r="30" cx="264.4781144781145" cy="97" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;/g&gt;&lt;rect x="259.73936899862827" y="65" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate&lt;br /&gt;20%"&gt;&lt;/rect&gt;&lt;text x="140" y="220" font-size="10px" fill="#999" text-anchor="end"&gt;0&lt;/text&gt;&lt;text x="660" y="220" font-size="10px" fill="#999" text-anchor="start"&gt;89%&lt;/text&gt;&lt;circle r="2" cx="150" cy="217" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;line x1="150" x2="650" y1="217" y2="217" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"&gt;&lt;/line&gt;&lt;circle r="2" cx="650" cy="217" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;g class="bar-circles"&gt;&lt;/g&gt;&lt;rect x="200" y="185" height="70" width="2" class="css-fix"&gt;&lt;/rect&gt;&lt;text x="140" y="340" font-size="10px" fill="#999" text-anchor="end"&gt;0&lt;/text&gt;&lt;text x="660" y="340" font-size="10px" fill="#999" text-anchor="start"&gt;89%&lt;/text&gt;&lt;circle r="2" cx="150" cy="337" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;line x1="150" x2="650" y1="337" y2="337" stroke="#999" stroke-width="1" stroke-dasharray="3,3" fill="#fff"&gt;&lt;/line&gt;&lt;circle r="2" cx="650" cy="337" opacity="1" fill="#999"&gt;&lt;/circle&gt;&lt;g class="bar-circles"&gt;&lt;circle r="30" cx="210.60606060606062" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="229.12457912457913" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="228.00224466891135" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="232.4915824915825" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="229.68574635241305" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="219.02356902356902" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="225.75757575757575" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="230.2469135802469" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="210.04489337822673" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1"&gt;&lt;/circle&gt;&lt;circle r="30" cx="223.51290684624018" cy="337" opacity="0.4" stroke="#fff" stroke-width="0" class="bulk" data-plugin="popover" data-title="" data-content="" fill="#27a9e1" data-original-title="" title="" data-has-tip="true"&gt;&lt;/circle&gt;&lt;/g&gt;&lt;rect x="223.8189980614223" y="305" height="70" width="2" stroke-width="4" stroke="transparent" fill="#000" data-plugin="tooltip" data-title="Avg Read Rate&lt;br /&gt;13%" data-original-title="" title="" data-has-tip="true"&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my case the second row is missing data (and would have green circles), and the last row should be yellow circles.</p>
  
  <p>The inclusion of the rect <code>.css-fix</code> (highlighted in pink) fixes the css nth-child selector (and correclty changes the last row of circles to yellow), but why?  </p>
  
  <p>I tried quite a number of things. I created an empty circle in the middle row (inside <code>.bar-circles</code> element) because I understand the <code>g</code> element is a non-positioning element. I also played with other elements inside the <code>g</code>, but I don't understand why having the <code>rect</code> element fixes this.</p>