Don't understand this CSS code


I’m currently at the challenge of ‘Responsive Web Design Projects - Build a Product Landing Page’. I see the coding for freeCodeCamp at Codepen as below :

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

what is the reason code “nav>ul” write like this?

what do you not understand of it?

that is a way to write more specific css selectors, it selects ul elements that have a nav as parent


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Yeah i edited back my question :sweat_smile:

my question is what is the reason code “nav>ul” write like this?

This to specify which ul you are targeting. Since there might be multiple
ul elements in a page.

Writing the code like that specifies that we are targeting the ul inside the nav

Hope that made it clear.

nav>ul only selects ul elements in the nav bar. This is done so if there are other ul elements on the page, their styling is not affected.

oh understood. Thank you! :smiley:

ok get it now, thanks! :smiley:

Imagine you have a complex navigation with several submenus. Those would be <ul> elements that are deeper nested like this:

  <ul> <!-- one level deep -->
      <ul>  <!-- two levels deep -->

nav ul --> this targets every <ul> element within a <nav> element, the outer and the inner one.

nav > ul --> this targets only the <ul> elements that are direct children of the <nav>, so only the outer one.

1 Like