Disable border for last item when item types are different

Question

How to disable border for last element when element types are different, i.e. one is a paragraph and the other is a hyperlink?

http://jsfiddle.net/e4zjcmue/

div *:last-of-type:after { border-right: none; }unfortunately disables all borders.

div * {
  display: inline;
}

div *:after {
  content: '';
  border-right: 1px solid blue;
}

div *:last-of-type:after {
  /* border-right: none; */
}

<div>
    <p>Lorem</p>
    <a href="#">Ipsum</a>
</div>

Run codeHide result

Answer 1

The selector that you seem to be looking for :last-child, rather than last-of-type.

*:last-of-type . , div, p .. , , , .

:last-child , , a . * :last-child , .

div * {
  display: inline;
}
div *:after {
  content: '';
  border-right: 1px solid blue;
}
div :last-child:after {
  border-right: none;
}

<div>
  <p>Lorem</p>
  <a href="#">Ipsum</a>
</div>

Hide result

Answer 2

: last-child, :

div * {
  display: inline;
}
div *:after {
  content: '';
  border-right: 1px solid blue;
}
div *:last-child:after {
  border-right: none;
}

<div>
  <p>Lorem</p>
  <a href="#">Ipsum</a>
</div>

Hide result

Answer 3

, html 'id'.

<div>
    <p>Lorem</p>
    <a id="last" href="#">Ipsum</a>
</div>

#last { border: 0; color: #000;