Learn Accessibility by Building a Quiz - Step 64

HTML-CSS
1

Tell us what’s happening:

I completed the step, but CANNOT understand how “footer, footer a” did what footer > a or footer, a , etc. could not.

Your code so far

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


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



/* 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/122.0.0.0 Safari/537.36

Challenge Information:

Learn Accessibility by Building a Quiz - Step 64

2

Hi @Hazzardous

Now, we cannot read the text. Target the footer and the anchor element within to set the font color to a color of adequate contrast ratio.

<footer>
  <address>
    <a href="https://freecodecamp.org">freeCodeCamp</a><br />
    San Francisco<br />
    California<br />
    USA
  </address>
</footer>

[*element* *element*] div p Selects all <p> elements inside <div> elements
[*element*>*element*] div > p Selects all <p> elements where the parent is a <div> element

The instructions ask you to select an element within an element.

footer > a won’t work because the parent element of a is address
footer, a will select all a elements

Happy coding

3

This selector is saying style the anchor element that is the direct child of the footer element.

But if you look at your markup, the direct child would be the address

    <footer>
      <address>
        <a href="https://freecodecamp.org">freeCodeCamp</a>

that is why you wrote footer a

this code would target the footer element and all anchor elements

In this case, we only want to apply styles just for anchor elements inside the footer element.
Not all anchor elements on the page

You can test this for yourself by adding another anchor element

</form>
            <a href="https://freecodecamp.org">freeCodeCamp</a>
    </main>

then use that selector. maybe pick a really bright color like red so you can see the difference

footer, a {
  color:red;
}

now try it with just selecting anchor elements inside the footer

footer a {
  color:red;
}

now you should see the difference on the page with the styles

hope that helps

4

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