title: Select the only child having the class using CSS & SASS
body: <p>I'm creating a border using SASS for the rows in the '<code>tbody</code>' element, but I'm unable to remove it in a case.</p>
  
  <p>For example,</p>
  
  <p>In the 1st '<code>tbody</code>' element, <code>tbody</code> has 2 children with the class <code>compDetails-row</code>.
  I'm creating a border there. </p>
  
  <p>However, in the 2nd <code>tbody</code> element, as you can see, there's only 1 child with the class <code>compDetails-row</code>, I don't want the border to be applied.
  Hence, I'm trying to use <code>only-of-type</code> selector, but it doesn't seem to work.</p>
  
  <p>How do I fix it?</p>
  
  <pre><code>&lt;!-- language: lang-css --&gt;
  
      .compDetails-row {
        position: relative;
        &amp;:before {
          content: '';
          display: inline-block;
          height: 100%;
          border-left: 1px solid grey;
          float: right;
          position: absolute;
          right: 20%;
        }
        &amp;.compDetails-row:only-of-type {
          &amp;:before {
            border: none;
          }
        }
      }
  
  &lt;!-- language: lang-html --&gt;
  
      &lt;tbody&gt;
        &lt;tr class="compDetails-row"&gt;
          &lt;td&gt;Row1 Column1&lt;/td&gt;
          &lt;td&gt;Row1 Column2&lt;/td&gt;
          &lt;td&gt;Row1 Column3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="compDetails-row"&gt;
          &lt;td&gt;Row2 Column1&lt;/td&gt;
          &lt;td&gt;Row2 Column2&lt;/td&gt;
          &lt;td&gt;Row2 Column3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;View Details&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tbody&gt;
        &lt;tr class="compDetails-row"&gt;
          &lt;td&gt;Row1 Column1&lt;/td&gt;
          &lt;td&gt;Row1 Column2&lt;/td&gt;
          &lt;td&gt;Row1 Column3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;View Details&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
  </code></pre>