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?
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
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.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Yeah i edited back my question 
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
element.
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! 
ok get it now, thanks!
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.