Styling breadcrumbs using CSS - css

Question

So here's the code I'm using to style my breadcrumbs.
.breadcrumbs-one{
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
width: 100%;
margin-top:15px;
margin-left:-20px;
}
.breadcrumbs-one li{
float: left;
}
.breadcrumbs-one a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #fff;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
.breadcrumbs-one li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
.breadcrumbs-one a:hover{
background: #fff;
}
.breadcrumbs-one a::after,
.breadcrumbs-one a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
.breadcrumbs-one a::after{
z-index: 2;
border-left-color: #ddd;
}
.breadcrumbs-one a::before{
border-left-color: #ccc;
z-index: 1;
}
.breadcrumbs-one a:hover::after{
border-left-color: #fff;
}
.breadcrumbs-one .current,
.breadcrumbs-one .current:hover{
font-weight: bold;
background: none;
}
.breadcrumbs-one .current::after,
.breadcrumbs-one .current::before{
content: normal;
}
I got it from here: http://www.red-team-design.com/css3-breadcrumbs
How do I modify the code so the CSS triangle isn't appended to the last breadcrumb?
So if there is one breadcrumb I wouldn't append a triangle at the end of it.
Similarly, if there are two breadcrumbs, I don't want a triangle at the end of the second breadcrumb.
And so on and so forth.

Answer 1

You could select the last li element with the last-child selector. After that you delete the content of the pseudo classes after and before.
#breadcrumbs-one li:last-child a::before,
#breadcrumbs-one li:last-child a::after
{
content: normal;
}
In this example you have selected the second link and you can see that the last link has no arrow after it.
If you want select a specific index element, for example the third li element. You can use the selector nth-child(index nummer). So for example, if you want to select the third li element you could do li:nth-child(3).
In this case :
#breadcrumbs-one li:nth-child(3) a::after,
#breadcrumbs-one li:nth-child(3) a::before
{
content: normal;
}
Fiddle update
Update
Now when you use the last-child selector and you have one element, that element will be seen as the last element. But you actually want that element not the have the idicator of last. So you have to use an other idicator for this. First, one element is the first and the last. You've already defined last-child so you could easially define the first-child element.
#breadcrumbs-one li:first-child a::after,
#breadcrumbs-one li:first-child a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
You want this code to have more priority then the last-child. Now you could use the !improtant tag of css, however i strongly recommend you to not use this tag at all costs. One way to give more priority to a code is to make the selector more specific. In this case the #breadcrumbs-one is actually a ul element, so placing a ul before it makes it more specific:
ul#breadcrumbs-one li:first-child a::after,
ul#breadcrumbs-one li:first-child a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
Now if you don't want to make a more specific selector, you can always place this code after the last-child selector code. Css will read from top to bottom order, so you want the overlapping code to be readed after the code to be overlapped. This order is only used when the selectors are identical.
However i choose the method of a more specific path, this way it doesn't matter where you place your code.
jsFiddle
Lets add another update
First of all i would suggest you to understand what happens. Here is a little example of how the arrows are created. With this the ::before and ::after pseudo classes are also used, Here some more info about that.
I would suggest you to first try it yourself before reading my answer.
Each 'crumb' is defined by the bar with text, arrow next to it and the border of the arrow.
So what psuedo class is generating what?
Well simply, the ::after pseudo class is generating the arrow it selfs and the ::before pseudo class generates the border of the arrow.
Now you only want the arrow color to be changed(you can change the border youself). Now if you have read the border-trick you may notice that this is created with only borders. This way you don't want to use background-color but change the border color.
You can change the border color with: border: 1px solid white;, however you only want to change the color. The way you do it now is also giving the width and border-style. With border-color you can change only the color. To be even more specific: border-left-color: white;.
So would have this:
#breadcrumbs-one .current::after
{
border-left-color: white;
}
Remeber what i said earlier? A more specific selector will overwrite other css code. In this case a class is more specific as a element(anchor).
Now you have only changed the arrow color. Let's change the background of the bar itself.
There is already a css code that defines the .current element :
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
}
Just change the background of the element, so:
#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
font-weight: bold;
background: white;
}
There you go, the .current element is white by default!
jsFiddle

Answer 2

Unless I've missed the point of the question, it isn't. Even on the page you cite, it shows the last item in the list has a different CSS class
<ul id="breadcrumbs-one">
<li>Lorem ipsum</li>
<li>Vivamus nisi eros</li>
<li>Nulla sed lorem risus</li>
<li>Nam iaculis commodo</li>
<li>Current crumb</li>
</ul>
So, just make sure your class="current" is on the last item in your list.
If this is dynamic, then it can be done with server sided code or probably some JavaScript