Proper CSS syntax

Question

When writing and referencing elements in my Stylesheets, is

ul#display-inline-block-example li 

And

#display-inline-block-example ul li 

The same thing? If not what is wrong with one or the other?

Answer 1

1.ul#display-inline-block-example li

2.#display-inline-block-example ul li

the first one will target li inside with id="#display-inline-block-example" like

ul id="display-inline-block-example" li /li - 1.first selector will target this element /ul

the second one will target all ul li inside element with the id selector "#display-inline-block-example"

e.g:

div id="display-inline-block-example" ul li /li /ul - ul li /li /ul - these will get affected if you write styles using this "#display-inline-block-example ul li " selector /div

Answer 2

No. The first:

ul#display-inline-block-example li 

will target list items within an unordered-list with the id display-inline-block-example.

The second:

#display-inline-block-example ul li 

will target list items within an unordered-list whose container (could be anything) has the id display-inline-block-example.

Answer 3

No they're not.

The first is applying styles to an li, which is nested inside a ul with id display-inline-block-example

The second is applying styles to an li, which is nested inside a ul, which is nested inside any element type with the id display-inline-block-example

Answer 4

Your second selector says that li is a successor of some ul which has #display-inline-block-example element as an ancestor. This is a different thing.