How to make display none for nth child

Question

I want to hide nth child of td i.e, like display none using css. In my below HTML I want to make second small tag data and last child i.e, anchor data to display none. How to achieve please some body help me. I cant add classes and ids to them. Because its dynamic data.

td small:nth-child(3) {
  display: none;
}

td:last-child {
  display: none;
}

<tbody>
  <tr>
    <td class="text-left">
      <a href="http://temp.goldenunicon.in/dutees_dev_env/index.php?route=product/product&amp;product_id=232">Polo Short Sleeve Cotton Tshirt</a>
      <small>
            Images: <br><div><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png" alt="" title="" class="img-thumbnail"></a></div>
          </small>
      <small>
          Color: <span title="black" style="background-color:#000000;display:inline-block;border:1px solid #ccc;width:25px;height:25px;cursor:pointer;outline:1px solid #229BCA;margin-left 4px;"></span></small>
      <small>Options: <dt>Size &amp; Quantity: </dt><dd>S  -  1; </dd><dt>Type Of Cloth: 160 gsm</dt><dt>Printing Type: screen</dt></small>
      <br> <br>
      <a href="index.php?route=tshirtecommerce/Designgner&amp;product_id=90&amp;parent_id=232&amp;cart_id=6bb84a5aa380b59c3a0a41be301e4844" title="">Edit Design</
        </td>
      </tr>
    </tbody>

Answer 1

You can target the second appearance of the small tag using nth-of-type(2). In the below Snippet I am assuming you will always have the anchor tag as the last element in your <td>. That's why I am targeting like td a:last-child. Suppose if you want to hide any element which is coming as last then you can target the element like td > :last-child.

td small:nth-of-type(2){
display:none;
}
td a:last-child {
  display:none;
}

<table>
<tbody>
  <tr>
    <td class="text-left">
      <a href="http://temp.goldenunicon.in/dutees_dev_env/index.php?route=product/product&amp;product_id=232">Polo Short Sleeve Cotton Tshirt</a>
      <small>
        Images: <br><div><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png" alt="" title="" class="img-thumbnail"></a></div>
      </small>
    <small>
      Color: <span title="black" style="background-color:#000000;display:inline-block;border:1px solid #ccc;width:25px;height:25px;cursor:pointer;outline:1px solid #229BCA;margin-left 4px;"></span></small>
    <small>Options: <dt>Size &amp; Quantity: </dt><dd>S  -  1; </dd><dt>Type Of Cloth: 160 gsm</dt><dt>Printing Type: screen</dt></small>
      <br> <br>
      <a href="index.php?route=tshirtecommerce/Designgner&amp;product_id=90&amp;parent_id=232&amp;cart_id=6bb84a5aa380b59c3a0a41be301e4844" title="">Edit Design</a>
    </td>
  </tr>
</tbody>
</table>

Answer 2

nth-child could work in your specific situation but not as you intend. Because small:nth-child(2) will select the FIRST small element. Not the second as you would expect. But instead will select the SECOND element that is a child of the td.

For example, in the snippet below, first span is the 3rd child of the div, you would expect ( from what i see in your question ) that using span:first-child would select it. But that's not the case.

/*not working*/
div span:first-child {
  color: red;
}
/*working*/

div span:nth-child(3) {
color:green;
}

div span:last-child {
color:blue;
}

<div>
  <h1>
    Title
  </h1>
  <p>
    Text
  </p>
  <span>span</span>
  <h2>
    h2 tag
  </h2>
  <a>Link</a>
  <br />
  <span>span2</span>
</div>

So to select the FIRST span you could use nth-child(3). But why does span:last-child work ? because it's the last child of the div. Not because it's the last span. This is because nth-child selects elements regardless of their type

So, to give you a better solution, use nth-of-type which selects a child of a specific type at a specific position inside a parent.

see more here > nth-of-type

For your specific example, check below

td > small:nth-of-type(3){
background:red;
}
td > a:last-of-type {
  background:green;
}
 

<table>
  <tr>
    <td class="text-left">
      <a href="http://temp.goldenunicon.in/dutees_dev_env/index.php?route=product/product&amp;product_id=232">Polo Short Sleeve Cotton Tshirt</a>
      <small>
        Images: <br><div><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-front-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-back-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-left-1521618542.png" alt="" title="" class="img-thumbnail"></a><a href="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png"><img style="width:100px; margin:1%;" src="http://temp.goldenunicon.in/dutees_dev_env//tshirtecommerce/uploaded/2018/03//cart-right-1521618542.png" alt="" title="" class="img-thumbnail"></a></div>
      </small>
      <small>
      Color: <span title="black" style="background-color:#000000;display:inline-block;border:1px solid #ccc;width:25px;height:25px;cursor:pointer;outline:1px solid #229BCA;margin-left 4px;"></span></small>
    <small>Options: <dt>Size &amp; Quantity: </dt><dd>S  -  1; </dd><dt>Type Of Cloth: 160 gsm</dt><dt>Printing Type: screen</dt></small>
      <br> <br>
      <a href="index.php?route=tshirtecommerce/Designgner&amp;product_id=90&amp;parent_id=232&amp;cart_id=6bb84a5aa380b59c3a0a41be301e4844" title="">Edit Design</a>
    </td>
  </tr>
</table>