1. Preview - Styles of the menu, question


#1



https://www.codecademy.com/courses/web-beginner-en-seyrq/0/1?content_from=make-an-interactive-website%3Ajquery-effects


Hi everyone. Code here works completely fine, i just want to understand the CSS part. Why ">" included into the menu's "li" styling? Who can explain?


.menu > li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}


#2

As far as I know, .menu>li is a child selector, it doesn't affect on li inside dropdown-menu.
.menu li is a descendant selector, it will choose all li inside menu.


#3

Check this out, mate:

https://css-tricks.com/child-and-sibling-selectors/

ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }

I'll admit it took me longer than it probably should have (way back when) when I was learning the basics of CSS. In both cases, they are selecting list items that are children of unordered lists. But there is a difference between children and descendants.

The first selector above is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. The list item could be buried three levels deep within other nested lists, and this selector will still match it. The second selector above is a child combinator selector. This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.


#4

systemjumper55077, thanks a lot!


#5

You're welcome. Happy to be of any help. I had this very same problem once. :slight_smile: Couldn't tell exactly the difference between one and the other.


#6

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