What is the difference between these IDs/classes?

Question

What is the difference between these?

#hello-world p p #hello-world p#hello-world

If you could give me an example of each that would be the best. Thanks

Answer 1

#hello-world p

Will match a <p> paragraph tag that is a child (or sub-child) of any tag with the ID hello-world, eg. (div can be anything)

<div id="hello-world"> <p>paragraph</p> </div>

or

<div id="hello-world"> <section id="another-id"> <p>paragraph</p> </section> </div>

...

p #hello-world 

Will match any tag with the ID hello-world that is a child (or sub-child) of a <p> paragraph, eg:

<p> <span id="hello-world">anything</span> </p>

or

<p> <a href="#"> <span id="hello-world">anything</span> </a> </p>

...

p#hello-world

Will match only <p> paragrah tags with the ID hello-world, eg:

<p id="hello-world">paragraph</p>

Answer 2

The selector: #hello-world p selects all <p> elements that are descendants of an element with an id that is hello-world.

The selector: p #hello-world selects an element with an id that is hello-world that is descended from a <p> element.

The selector p#hello-world selects a <p> element that has an id of hello-world.

Here is a fiddle: https://jsfiddle.net/

Answer 3

With this in css: #hello-world p { }, you would style every paragraph in #hello-world element. It could be div, span, section or what ever.

With: p #hello-world { } you would style #hello-world element in any paragraph on your page. Notice that ID's (in this case #hello-world ID) must be unique and only one element should have the id.

With p#hello-world { } you would style a paragraph which ID is #hello-world

I hope that helps.

Answer 4

Assuming you're asking about CSS selectors and which make sense to actually use, you first need to realise that CSS selectors are matched from right to left.

#hello-world p

This selects every <p>-element and all of those are verified to be (somewhere) in an element with the id hello-world

<p><div id=hello-world><p>...</p></div></p> (matched the <p> inside <div id=hello-world>)
<p><div id=hello-others><p>...</p></div></p> (does not match)
<p><div><p id=hello-world>...</p></div></p>  (doet not match)

---

p #hello-world

This selects every element with the id hello-world (which MAY only be one element) and that element is verified to be (somewhere) in a <p> element.

<p><div id=hello-world><p>...</p></div></p> (matched the <div id=hello-world>)
<p><div id=hello-others><p>...</p></div></p> (does not match)
<p><div><p id=hello-world>...</p></div></p>  (doet not match)

---

p#hello-world

This selects every element with the id hello-world (which MAY only be one element) and that element must be a <p>-element itself.

<p><div id=hello-world><p>...</p></div></p>  (does not match)
<p><div id=hello-others><p>...</p></div></p> (does not match)
<p><div><p id=hello-world>...</p></div></p>  (matches <p id=hello-world>)

---

All of them make sense in a way, and all of them mean something different. Which is best would be up to you and your implementation.

Common sense would dictate the p #hello-world and p#hello-world to be somewhat odd, as it is basically claims you are not sure where and/or on what element you will be applying the id hello-world. If you are sure of its position/id, you should simplify it to just #hello-world, as that is what it would match anyway.