Earlier in the lesson when it’s introducing breadcrumbs it does mention something about this (though it doesn’t draw a direct correlation to the declaration being discussed).
The syntax always appears to the the same: “…li+li::before”
In this example - we’re just using the more specific class selector (“location”).
When you remove that specificity element of the selectors and leave it at the li+li::before you may still have the same or similar question: “Why are there 2 li’s?”. As previously stated, there is some mention of this earlier in the lesson where it says the declaration is moreso impacting the 2nd element (the 2nd li). Combined with the content: “>” - it is saying that after the 2nd li (and ongoing) to insert the “>” symbol. This is of course when our breadcrumb trail would start.
The selector being discussed being more specific is saying to look for any list items with the class of “location” and then after the 2nd occurrence of it to place the “>” symbol before.
In essence:
Location > Location > Location > Location (noting that there is no “>” before the first location)
First of all - I am extremely glad to see that I am not the only person confused by this exercise and one step in particular! We are all in this together, friends.
Secondly, would a kind, patient and definitely smarter-than-me-person please break down the logic and meaning behind .breadcrumb li.location+li.location::before
What I’m essentially asking is if somebody take break down the command into sections and explain which part of the code refers to which element and how it affects the outcome.
Hi there, having the same issue, not fully understanding the breadcrumb section and keep on pressing Get a hint and copying and pasting the code which is no clear
Sometimes to understand more we have to use other tools that explain it in detail wether is this link or other links
codeacademy does its best but we must remember to fully become a full stack web developer we must think like engineers and search for the answer until we truly understand it. hope this link helps
Same problem for me too. I see that years passed and this particular lesson didn’t change at all…
Making arrow heads-like shapes with borders not explained
Breadcrumb thing not well explained
This kind of lessons making me sad, making me feel like kinda useless…
Please reconstruct this section cause it’s really disappointing and annoying.
Don’t worry mate it’s not you. Those in charge have not explained it well at all. I can’t for the life of me understand what the difference between the different breadcrumbs are…
the part that’s confusing to me is where we are meant to be coloring the tags with the ‘attribute’ selector gray. Why are we targeting the ‘a’ elements here instead of the ‘li’ elements?
When we created the attribute and location classes, we applied them to the li elements:
When we get to step 2: “Modify the CSS to only put the “>” character between location based breadcrumbs,” we target the li elements with the class location, using .breadcrumb li.location+li.location::before.
However, when we get to step 3, where we’re asked to “Color the “attribute” anchor tags gray to indicate that they are different than the “location” ones,” we are supposed to target the a elements rather than the li elements, even though the class is applied to the list elements.
.attribute a {
color: gray;
}
It seems like any child elements of a parent element with a class will inherit the characteristics of the class, I guess. But why doesn’t targeting the parent allow us to set the color to gray? I tried the following but it doesn’t provide the desired outcome:
I also struggled with this but think I finally figured this out with help from others in this chain.
So rather than struggling with the code I asked myself the simple question “What is the designer trying to achieve?”. In this case we want to put a > between … and Hotels. So I’m looking to target the space between … and Hotels. In order to do this we need to select the <li> element that comes directly after Hotels using the sibling (+) selector and then combine with the pseudo class ::before
li.location+li.location::before
We can then add the content and styling as we wish.
I honestly think breadcrumbs is redundant. I have never actually seen a website use breadcrumbs that takes you to here and there but never back tracking to the start. If anything and in my opinion…breadcrumbs seems like its obsolete.
I can only echo the difficulties everyone else has mentioned here. This is the first topic where I feel I am just copying and pasting without taking anything in. I would be astounded if anyone new to CSS managed to complete step 2 without looking at the hint first. It doesn’t feel like anything is explained.
Also, how is ‘hotels’ a location and not an attribute in step 1?
It is because the <li> elements are not the visible part of this page that we need to style on this step. We are wanting to target specifically and then style the anchor text found between the <a> tags, so that they have a visual differentiated appearance as an attribute breadcrumb as opposed to a location breadcrumb. The anchor text only.
Ever ordered a pizza online and followed the breadcrumbs to see where they are in the steps to completing your order? Or did any online shopping from a department store?
I never fully got to understand and its hard for me to understand how and what the “before” and “after” and “+” and “<” work. I’m studying css and I don’t quite fully understand these, can anyone help me understand?
I am struggling with this section as what I type (or more specific to this section of the course, copy and paste) into the ‘code’ section of the lesson, has absolutely no effect on the ‘webpage’ section. I have tried asking the ‘AI learning assistant’ and tried everything it suggested to no avail. I’m finding it hard to understand as there is no example.