How to remove end of breadcrumb with CSS / jQuery

Question

I tried to look this up, but everywhere I find this question asked, the html code is so much different and didn't apply to my problem.

We are using a ready made e-commerce platform, that renders out the breadcrumbs in the following matter:

[jsfiddle][http://jsfiddle.net/FVHjG/1/]

I still need to get rid of the last raquo there (after "Suljetut" in this case.)

I have managed to hide the beginning element and the last crumb (a link that actually links to the same page, which is stupid). The ones that are left are actual categories and "Home" of course. I have to remove the last raquo (last-child) as opposed to the fourth (nth-child) in this case. So that the right raquo gets removed everytime, because sometimes a product is only 2 categories deep, and sometimes 5 categoeries deep and so on.

Can someone please guide me in the right direction? If it's possible with CSS that would be great, and I'm trying to consider jQuery a last option if it's not possible with CSS.

PS. I cannot alter how the HTML code renders out in any way, so no extra classes/IDs can be inserted (well with jQuery I can of course).

There's no way to dynamically match that element with CSS selectors due to the markup. Why can't you change the structure (and you should seriously think of doing so). — BenM, Feb 14 '13 at 12:26
Please add the relevant parts of your code to the question. Do not just link to a JSFiddle. If this code disappears the question will no longer be understandable. — Spontifixus, Feb 14 '13 at 12:28
with code such as jQuery it is trivial: `$('.BreadcrumbSeparator:last').css('display','none');` — Mark Schultheiss, Feb 14 '13 at 12:49
Thank you Mark, it seems that your snippet is the cleanest way to do it, since it's not doable with CSS. — Pawel S., Feb 14 '13 at 13:19

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

Woah, that list is crazy. There's no need to have so many lists within lists:

<ul>
    <li>
        <a href="#">Link 1</a>
        <span class="Breadcrumb">x</span>
    </li>
    <li>
        <a href="#">Link 2</a>
        <span class="Breadcrumb">x</span>
    </li>
    <li>
        <a href="#">Link 3</a>
        <span class="Breadcrumb">x</span>
    </li>
    <li>
        <a href="#">Link 4</a>
        <span class="Breadcrumb">x</span>
    </li>
</ul>

This is how you'd then remove the last breadcrumb:

ul li:last-child .Breadcrumb { display:none; }

JSFiddle example.

If in your example there are only ever going to be 4 links (no more, no less), you can do this:

ul > li > ul > li > ul > li > ul > li .BreadcrumbSeparator { display:none; }

But that's hardly ideal. Otherwise with jQuery you'd have to loop through to pull the deepest breadcrumb and remove it (see select deepest child in jQuery).

edited May 23 '17 at 12:04

Community

1
1

answered Feb 14 '13 at 12:26

James Donnelly

126,410
34
208
218

See the caveat: "PS. I cannot alter how the HTML code renders out in any way". – BenM Feb 14 '13 at 12:27
1

If he can't change the HTML then he should find somebody who can because that list really bad otherwise. – James Donnelly Feb 14 '13 at 12:30
@JamesDonnelly I completely agree ;) – BenM Feb 14 '13 at 12:39
I've edited my post to include a possible fix. This situation really isn't ideal at all though. – James Donnelly Feb 14 '13 at 12:41
Yeah, I know it's not ideal, and have now asked the developers to change it so it's more... humane. :) – Pawel S. Feb 14 '13 at 13:20

score 0 · Answer 2 · answered Feb 14 '13 at 13:06

0

This isn't possible in css. You can use basic math in SASS or LESS however, otherwise javascript is the only option as mentioned

answered Feb 14 '13 at 13:06

Adam Spence

3,040
1
21
17

How to remove end of breadcrumb with CSS / jQuery

2 Answers2