CSS question about selector placement. Help?

Question

When creating a CSS style sheet can any one tell me the difference between the positioning of these selectors?

How come with the " p#footer " the selector "p" is on the outside of the id tag?
And with the other "#footer p" the selector "p" is on the inside of the id tag?
Whats the difference?

--------------------------------------…
p#footer {
font-family: "Trebuchet MS", sans-serif;
font-size: .75em;
color: #fff;
text-align: center;
}

#footer p {
font-family: "Trebuchet MS", sans-serif;
font-size: .75em;
color: #fff;
text-align: center;
}
--------------------------------------…

I know what CSS is and I know that in both cases the selectors are being referenced so that they can be styled. But when I see selectors in css positioned in these ways it seems to always confuse me for some reason. When do selectors go on the inside/outside of id tags?

Answer 1

Answered your exact same question before with:



"p#footer" means that only a "p" tag with id of footer (id="footer) will be affected by the styling rules. If you leave the "p" off, it means you could add the id to any tag...not just a "p" tag. Since an id can only be used once per page, there is no need to indicate which tag has the CSS styles.



"#footer a" indicates that ONLY the link tags inside the footer paragraph tag that has id="footer" will have those CSS style rules applied.



You do not need to keep asking the same question over and over since it has been answered:



https://answersrip.com/question/index?qid=20110802114548AA48C97



Ron

Answer 2

p#footer: means you are looking for a specific "p" element with an id of "footer"



#footer p: means you are looking for "p" elements which are descendants of (meaning, contained in) any element with an id of "footer"



p #footer: (which you didn't include, but should be explained here, since it is a completely different thing) would mean you are looking for an element with an id "footer" which is a descendant of a "p" element.



The space between the two selectors means 'descendant-of', and the items are placed in the order that they should appear if your browsing down the tree of tags (the one closest to the root tag goes first). If there is no space, then it is a specifier on the element it is attached to.

Answer 3

i'd have had Siddle in instead of Hastings, yet Australia drew because of the fact they could no longer take 10 2d innings wickets. They mandatory to shake issues up a sprint as Hilfenhaus is value effective yet isn't taking many wickets. Siddle had to be drained and sore after bowling one in all those extensive volume of overs at %. interior the 2d innings, so i think resting is probable the main suitable thank you to get him extra wholesome for the tests against Sri Lanka that are arising.

Answer 4

Selectors locations tells the order in which to look for the element.