Show breadcrumb with text-overflow css - html

Question

I have a breadcrumb which I need to cut / shorten the breadcrumb if it's too long with text-overflow css. I have tried and confused to make a different color link only in last breadcrumb. In my breadcrumb, max breadcrumb to show is 4.
From the code below, I success to shortened breadcrumb using text-overflow: ellipsis. Like if breadcrumb have 4 link, I using foreach to show breadcrumb that index number 2 and index number 3 is too long, I shortened them using text-overflow: ellipsis. If the breadcrumb have 3 link, I used same looping too.
I want to ask how can I make different color text / link only in the last breadcrumb like if breadcrumb have 3 link, index number 2 is have different color than others. And if breadcrumb have 4 link, index number 3 is have different color ?
Here's the html code
<?php if (isset($breadcrumbs)): ?>
<?php
$numItems = count($breadcrumbs);
$i = 0;
//echo $numItems;
?>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb): ?>
<?php if ($i == 0 || $i == 1): ?>
<li class="breadcrumb-item"><?= $breadcrumb['text'] ?></li>
<?php else: ?>
<li class="breadcrumb-item"><?= $breadcrumb['text'] ?> </li>
<?php endif ?>
<?php $i++; ?>
<?php endforeach ?>
</ol>
</nav>
<?php endif ?>
Here's the css code
.breadcrumb {
padding: 5px 0px;
margin-bottom: 0px;
background-color: #ecf0f5;
}
.breadcrumb-item+.breadcrumb-item::before {
content: ">";
font-size: 12px;
}
.breadcrumb-item {
font-size: 14px;
}
.breadcrumb-item .last{
display: inline-block;
width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 10px;
}
.breadcrumb-item a{
color: #535353;
}
.breadcrumb-item:hover > a{
color: #1787fa
}
.mini-breadcrumb{
display: none;
}
Thank you

Answer 1

Try this css on your .breadcrumb-item:
.breadcrumb-item:last-of-type a{
color: grey;
}
use your desired color instead of grey.

Answer 2

You can also use :last-child selector.
.breadcrumb-item:last-child a {
color: grey;
}
Just adding another link where you can find difference between type-of and child difference.
What is the difference between :first-child and :first-of-type?