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?
Add a comment
|
4 Answers
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
Comments
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.
Comments
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.
Comments
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
