Descendant selectors or specific classes?

Question

Suppose I have this markup:

<div id="#titles">
<p>Intro text <span>text text</span> text text</p>
<ul>
<li>text text text</li>
<li>text <span>other text</span> text text more text</li>
<li>text text text</li>
</ul>
</div>

and I want to style the span which is inside the li is it better to use the descendant selector #titles li span or add a custom class to the span I want to work on? I prefer using selectors in the style sheet so that I can avoid extra attributes in the markup to keep it as clean as possibile, but I was wondering if there can be performance issues when using a lot of those selectors in a page, considering they could even be deeply nested.

Answer 1

#title li span should be absolutley fine. I don't think that using a class will have a noticable impact on the performance.

Answer 2

The descendant selector is more general so if you want to style every <span> inside <li> use it. If you want to style only some <span> elements apply a class to them. There are no other differences.