CSS subchild selector - html

Question

Both of the following codes seem to work properly to style the span element:
<style>
div p span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
<style>
div span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
But I'm not sure if the second one is the right coding and if there's a difference between them, for example regarding browser support.

Answer 1

Neither of them is a “subchild selector”; there is no such concept in CSS. They are different descendant selectors, or descendant combinators as they are called in the Selectors Level 3 specification. Their meanings are different, so it depends on the purpose which one is better.
The selector div span matches any span element that is a descendant of a div element. The selector div p span matches any span element that is a descendant of a p element that is a descendant of a div element. Both selectors are rather theoretical as such; they are hardly useful in practical situations without some additional components such as class selectors.

Answer 2

They both work because the elements selected by div p span are a subset of the ones selected by div span.
If you include a <span> as a child of the <div>, the second one will select it, but the first one will not. If you don't include a <span> as a child of the <div>, they will select exactly the same elements.
For example:
<div>
<span>Only the second selector will make this text red</span>
<p>
<span>Hello, world!</span>
</p>
</div>

Answer 3

Well, it really depends on the context. For example, this selector...
div p span
will only apply to all span elements that are children of a p element which in turn, are children of a div element. Consider, this html...
<div>
<span class="title">Title</span>
<span class="desc">Description</span>
<p>
<span>Content</span>
<p>
</div>
the following css declaration will color the content span in blue
div p span
{
color:Blue;
}
however the style is not applied to the title and the description because they are not children of a p element. Now by using this css declaration...
div span
{
color:Blue;
}
will cause both the title, description and the content to be coloured in blue because this selector targets all span elements that are nested within a div element
As for performance, that's hard to determine because it all depends on implementation and how well different browsers traverse through a DOM hierarchy and apply the style. But, I'd guess that the more specific you can be the better so that the HTML parser can target elements directly. With that in mind, this css selector...
div p span
should perform faster than
div span
because it will cause the rendering engine to look for all div element, then p elements ignoring all other elements (including span elements that are direct children) and finally it'll look for span elements

Answer 4

both of them will work but
div p span {
font: 18px arial;
color: red;
}
is more correct, and you are less likely to have problems like when you decide to add a span in an li for some other possible purpose.

Answer 5

div > p > span {
font: 18px arial;
color: red;
}

Answer 6

First method is correct way.The styles work only span that inside of the p tag and you can give/edit/change specific styles on this item ...but the second method's style work all span inside of div tag..