CSS selector performance - pseudo selectors

Question

Alright, so this depends completely on the use case. What I'm going to do is handle cases.

Point 1 - Concerning given example

Case A

Say your code is simply:

<a href="#" class="myImage">
    <img>
</a>

In this case .myImage img and .myImage img:only-child will have essentially identical performance hits. Reason being is as follows:

CSS performance hits are derived from having to style or re-style boxes. What CSS does is affect your graphics processor, not the CPU, so we only care about visual updates. And styling things again with duplicate properties DOES cause a redraw (By this I mean duplicate properties that are applied at a later time, which selectors generally cause).

Usually, .myImage img would style ALL <img>s in .myImage. While using the only-child selector may not style all (obviously).

But in this example, both .myImage img and .myImage img:only-child would do identical things, since they would both cause 1 draw/redraw on the same box.

Case B

But suppose we have:

<a href="#" class="myImage">
    <img>
    <img>
</a>

Here though, we have a different story.

In this example, only-child wouldn't work at all, since <img> is not the only child.

Case C

Finally, suppose you have this, but you only want to style the under the :

<a href="#" class="myImage">
    <img>
</a>
<div class="myImage>
    <img>
    <img>
</div>

In this case, using the only-child selector would be significantly better performance-wise, since you only will style one element, instead of three.

Conclusion and Takeaway

Basically, remember a few things.

CSS selectors help you with writing code because you get to add less IDs and Classes, however, they are almost always less efficient than using all IDs and Classes, because using selectors will causes extra redraws. (Since you'll inevitably style multiple elements with some selector, and then re-style other things with IDs or classes, causing unnecessary redraws)
only-child is NOT faster than .class child if that .class only has one child.
Technically what you are comparing are two completely different things, used for different purposes.

Conclusion

In final answer to your question. In your shown example, neither is more efficient than the other since they cause identical redraws.

However, as

"Does :only-child help specificity in selector selection?"

goes: Yes, that's the point of the selector. See: http://www.w3schools.com/cssref/sel_only-child.asp

Sources: I am a significant volunteer developer for Mozilla Thunderbird and the Mozilla project and work in the CSS area.

FYI

There are of course weird exceptions to this, but I won't go over them here since I think your exact question doesn't give a brilliant example.

Point 2 - Concerning speed of find selectors

I am purposely trying to drive home the point that it is the drawing the causes the CSS perf hit, not finding the selectors. However, the reason I say this is not because finding selectors takes no time, but instead because it's time is miniscule to the time caused by drawing. That said, if you did have 5,000 <div>s or something, and attempted to style a few using pseudo selectors, it would definitely a little longer than using CSS classes and IDs.

Again though, in your example it would make no difference, since it would look through each element anyway. Why only-child is helpful perf-wise is because it would stop searching for some element after it finds more than one child, whereas simply doing class child would not.

The problem with pseudo selectors is that they usually require a lot of extra searching AND it happens after IDs, classes, and such.

The links you provided are actually very helpful and I'm surprised they didn't answer your question.

One thing I should point out is that many selectors believed to be slow may be vastly improved now. See: http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

Remember selector performance is only important on very large websites.