Make: after an element only if there is another element after it

Question

I want to have after elements only if there are other elements after it. Here is my code:

<table id='table_1'>
   <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
 </tr> 
</table>

Is it possible: after A and B, but not C?

My css

#table_1 td:after{
content: "";
background: black;
border: 1px solid black;
position: relative;
margin-left: 10px;
}

Answer 1

The easiest way to do this is to use not (: last-child):

#table_1 td:not(:last-child):after{
    content: "";
    background: black;
    border: 1px solid black;
    position: relative;
    margin-left: 10px;
}

Working version

This way you only have one selector and you do not need to redefine the code.

Answer 2

you can use :beforewith +to support older browsers

Adjacent selector :

#table_1 td {
  position: relative;
}
#table_1 td + td:before {
  content: "";
  position: absolute;
  background: black;
  border: 1px solid black;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

<table id='table_1'>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Run codeHide result

Answer 3

td:last-child td, , :after:

#table_1 td:last-child:after {
    display:none;
}

:

#table_1 td:after {
    content:"";
    background: black;
    border: 1px solid black;
    position: relative;
    margin-left: 10px;
}
#table_1 td:last-child:after {
    display:none;
}

<table id='table_1'>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
</table>

Hide result