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

Language Help CSS
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?
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.