Don't understand this CSS code

HTML-CSS
#1

Hi!

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;
}

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

#2

what do you not understand of it?

#3

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

cheatsheet: https://www.w3schools.com/cssref/css_selectors.asp

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

#4

Yeah i edited back my question :sweat_smile:

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

#5

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
element.

Hope that made it clear.

#6

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.

#7

oh understood. Thank you! :smiley:

#8

ok get it now, thanks! :smiley:

#9

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

<nav>
  <ul> <!-- one level deep -->
    <li></li>
    <li>
      <ul>  <!-- two levels deep -->
        <li></li>
        <li></li>
      </ul>
    </li>
  </ul>
</nav>

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