Learn Accessibility by Building a Quiz - Step 46

HTML-CSS
1

Tell us what’s happening:

my code is telling me I should only change the color of a elements inside list elements, which I thought I was doing. Am I missing something?

li > a {
color: #dfdfe2;
}

Your code so far

<!-- file: index.html -->


/* file: styles.css */
/* User Editable Region */

li > a {
  color: #dfdfe2;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 46

2

Your selector is not selecting all anchor elements in the li
Rather it is selecting the anchor elements whose direct parent is an li

Remove the angled bracket to select all anchor descendants.

1 Like
3

Hi. thanks to you i solved it , but still i don’t understand it the difference. between li>a{} and li a{}, both still selects the a elements. could you please explain it to me in other words? thanks.

4

normally we do not encourage people to ask questions in someone else’s topic but since your question is directly related to the original question, I will go ahead and answer it here (but please make a topic for yourself next time when you have a question)

For your question about using the > in the selector. You can think about the elements as being part of a tree. The tree has branches and the branches have smaller branches etc.
So when we say we want ‘all’ elements in the li then that means we want you to go to a specific branch of the tree, in this case the li branch and find every sub-element that is within it that is an anchor. But for a direct child of the element, these are the branches that are coming out the li branch directly (not the branches that come out of other branches that came out from this li branch but a direct child of it).

In coding we can look at a code sample like the one below:

<li>
  <a href="www.freecodecamp.org"></a>
  <p>words <a href="www.google.com"> other words</a></p>
</li>

The first anchor element is a child of the li so it is selected by >
the second one will not be selected though.

The second anchor element is a child of p element which itself is a child of the li element.
So to select all anchors we must use the li a selector to get them all.

Here’s a reference I like that explains the selectors:

1 Like
5

and when i go to the next step, the code becomes automatically
li > a {
color: inherit;
}
so trying again the same step , the error was the missing space.
li>a wrong
li > a correct

6

really easy to understand with the example , thanks very much for your time and yes next time I’ll create a post. thanks again

1 Like
7

yes it turns out they didn’t mean ‘all elements’ (even though that is what they said).
The step also accepts li a

1 Like
8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.