Learn Accessibility by Building a Quiz - Step 13

HTML-CSS
1

Tell us what’s happening:
What exactly is the difference between these two selectors:
nav > ul and nav ul. As far as I understand, nav ul should target the ul elements in nav parent element. The task is step 13 is to : “Target unordered list elements within nav elements, and use Flexbox to evenly space the children.” It won’t let me use nav ul, the correct solution is of course nav > ul, but I don’t get the difference it makes.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
    <main></main>
  </body>
</html>


/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}


/* User Editable Region */

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

/* 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/113.0.0.0 Safari/537.36 Edg/113.0.1774.50

Challenge: Learn Accessibility by Building a Quiz - Step 13

Link to the challenge:

2

In fact, later on when I came across this step where it asks me to " Select the list elements within the navigation bar, and give them the following styles:"

color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;

it wouldn’t let me just use nav > li. The correct answer is either nav li or nav > ul > li. I don’t understand why? The function of both selectors on W3Schools comes out to be similar, at least to me.

3

When you use selectors like this for example

div>p

This will only select the direct p child element of the div element

when you use this selector

div p

This selects all p elements inside the div

You can see the two selectors used here. Notice how not all p elements color is red, and notice how all background for the p elements is aqua

1 Like
4

Thank you so much! Just one more question related to this:
So, when I want to select the direct li child of the nav element, I must go like nav > ul > li? I can’t just write nav > li, right?

5

Right, its better to more specific in css in general. So, if you had something like


<nav>
   <ul>
        <li>link one</li>
         <li>link two</li>
   </ul>
</nav

Then you want to make sure your accessing each level to get to where you want. So if you want the li you would

nav > ul > li

So with this your accessing the nav, then taking a step down to access the ul, and then taking another step down to get the li that you want.

1 Like
6

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