Understanding the differences in these selectors

Question

I working with a stylesheet that has 2 different rules:

#main_navigation ul li{ ... }

and:

#main_navigation li{ ... }

I'm not clear on how to interpret the difference. In my reasoning - 'li' can't exist independent of either a ul or a ol

Is the above saying 'use the first for all items in a unordered like' but use the 2nd for _any line item?

my thx ia

Answer 1

Yes. If the <li> lies under <ul> it will match the first rule as well as the second.

Answer 2

Yes.

The first says "apply the following rules to all li which are descendants of a ul which in turn is a descendant of an element with id main_navigation."

The second says "apply the following rules to all li which are descendants of an element with id main_navigation."

Answer 3

Yep. The second rule matchs <li> elements in both ordered <ol> and unordered <ul> lists. The first is more specific and only matches unordered list items.

Answer 4

The first line of code says "apply this style to list items of unordered lists within the div with id of main_navigation"

The second line of code says "apply this style to list items of any type of list within the div with id of main_navigation"