title: Difference between when applying tbody td:nth-of-type(3){ border-bottom-color: transparent; } and tr.noborder td{ border-bottom: transparent; } in CSS
body: <p><strong>First Scenario:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1{
   text-align: center;
  }
  
  td{
   width: 100px;
   height: 100px;
   border-right: 1px solid gray;
   border-bottom: 1px solid gray;
   
  }
  
  table{
   margin: 0px auto 0px auto;
  }
  
  tbody td:nth-of-type(3){
  
   border-right-color: transparent;
  
  }
  
  tbody tr:nth-of-type(3){
  
   border-bottom-color: transparent;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Table&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="../CSS/tic.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Tic Tac Toe&lt;/h1&gt;
  
  &lt;table&gt;
  &lt;tbody&gt;
   
     &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
     &lt;/tr&gt;
   
   
     &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
     &lt;/tr&gt;
   
   
     &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Second Scenario:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1{
   text-align: center;
  }
  
  td{
   width: 100px;
   height: 100px;
   border-right: 1px solid gray;
   border-bottom: 1px solid gray;
   
  }
  
  table{
   margin: 0px auto 0px auto;
  }
  
  tbody td:nth-of-type(3){
  
   border-right-color: transparent;
  
  }
  
  tr.noborder td{
   border-bottom: transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Table&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="../CSS/tic.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Tic Tac Toe&lt;/h1&gt;
  
  &lt;table&gt;
  &lt;tbody&gt;
   
     &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
     &lt;/tr&gt;
   
   
     &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
     &lt;/tr&gt;
   
   
     &lt;tr class="noborder"&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For the first scenario, I am not getting the correct output. I am not sure that why the property <code>tbody td:nth-of-type(3) { border-bottom-color: transparent; }</code> is not getting applied even though its specificity is more than <code>td</code>.</p>
  
  <p>For the second scenario, I added a class in HTML and the results are correct while for the first scenario it is incorrect.</p>
  
  <p>Could you please help me in making changes to the CSS property in the first scenario without adding any class and id?</p>
  
  <p>I am new to HTML and CSS. Thank you so much for your concern in advance.</p>