Secondary Navigation - Fresh Deals: Update the CSS so that there is no longer a breadcrumb denoting symbol between “Blueberries” and “Organic”

Web Development Front-End
1

I’m working on the Fresh Deals project and i’m stuck on one thing.

Update the CSS so that there is no longer a breadcrumb denoting symbol between “Blueberries” and “Organic”.

This is what I do:

.breadcrumb li.location + li.location::before {
content: "|| ";
}

However nothing happens? I double checked to make sure I made the location class and im running out of ideas.

Best regards!

1 Like
2

Hi there,

If you’re still having problems, could you link the course lesson, please? Just so there’s a reference to look at. :slight_smile:

3

.breadcrumb li.location::before {
content: "/ ";
}

4

Hello. I’m having the same problem. It’s in the “Fresh Deals: Blueberries” project

HTML:

    <ul class="breadcrumb">
    <li class="location"><a href="#">Shop</a></li>
    <li class="location"><a href="#">Groceries</a></li>
    <li class="location"><a href="#">Blueberries</a></li>
    <li class="attribute"><a href="#">Organic</a></li>
    </ul>

CSS for the breadcrumbs:

.breadcrumb li {
    display: inline;
}

.breadcrumb li+li::before {
  content: "/ ";
}

.breadcrumb a:hover{
  cursor: pointer;
}

The li+li syntax is the suggested solution in the hints.
This separates: all the breadcrumbs with an /. The task 7 says:

  1. Update the CSS so that there is no longer a breadcrumb denoting symbol between “Blueberries” and “Organic”.

The code suggested above accomplishes that, replacing the 2nd rule with it:

.breadcrumb li.location::before {
  content: "/ ";
}
  1. The selector seems redundant to me, because .location already selects the desired list items - there should be no need to mention that it is list items inside of elements of class breadcrumb that I’m selecting. Correct?
    In fact,
.location::before {
  content: "/ ";
}

accomplishes the same result.

  1. That also makes the + adjacent sibling selector in .breadcrumb li+li::before seem superfluous. Indeed, MDN documentation for the before pseudo-element doesn’t include the + in the syntax.
    Question: Why is the + combinator suggested in the hints - and in the previous lessons regarding the design of breadcrumbs?
1 Like
5

Not sure if this still applies to you, but I was having the same issue, and realize I was putting my location and attribute class inside the anchor instead of the li.

1 Like
6

Have you figured out the solution for this? I am still trying to wrap my head around it and need support/explanation as my selector does not remove the content “>”

1 Like
7

The solution I tried that worked was
.breadcrumb li.location+li::before {
as my selector. That removed just the symbol between blueberries and organic, but kept it between shop and groceries as they are the ones with the location class attached.

Hope this helps!

8

It applies to me. Thank you so much! I had the same issue. Now that I moved the class=‘location’ class=‘attribute’ to the

  • tags, it worked flawlessly.

    Thanks again

    • 9

    When i put it in, i needed to use
    .breadcrumb li+li.location::before

    the way you wrote it with li.location+li made it backwards when i tried it.